Checkbox.js

Web sitenizdeki checkbox yani tıklandığında içinde ok işareti çıkan onay kutucuklarının görüntüsünü değiştirmek için kullanabileceğiniz bir çalışma. Sadece tasarımı değiştirmekle kalmayıp kullanmanız için size bir kaç tane fazladan özellik te sunuyor.  Bildiğiniz üzere bazı form örnekleri doldururken bize en fazla 5 tane seçenek işaretlememiz istenir. Bunun gibi seçeneklere limit getirerek kullanıcıların daha fazla onay kutusu işaretlemelerini engellememiz mümkün. Seçeneklere kilit vurarak tıklanmasını da engelleyebiliriz. Ayrıca Safari tarayıcısındaki onay kutusu tasarımı da bulunuyor.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js ve stil dosyaları :

<link rel="stylesheet" href="jquery.checkbox.css" />
<link rel="stylesheet" href="jquery.safari-checkbox.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.checkbox.min.js"></script>

Javascript :

		<script type="text/javascript" src="jquery.checkbox.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('input:checkbox:not([safari])').checkbox();
				$('input[safari]:checkbox').checkbox({cls:'jquery-safari-checkbox'});
				$('input:radio').checkbox();
			});
		</script>

• Body etiketleri arasına eklemeniz gereken bölüm.

Tıklandığında aktif yada pasif yapma :

<input name="checkbox.1.1" type="checkbox" onclick="var j = jQuery('#check').attr('disabled', jQuery('#check').attr('disabled') ? false : true)">
<input name="checkbox.1.2" type="checkbox" id="check" checked> <label for="check">

Tıklanmayı devre dışı bırakma :

<input name="checkbox.1.3" type="checkbox" disabled>

Seçilmiş ve iptal edilemeyen :

<input name="checkbox.1.4" type="checkbox" disabled checked>

Sadece bir tane seçebilme (bir tane zorunlu seçme):

<input name="radio.1" value="1" type="radio">
<input name="radio.1" value="2" type="radio" checked>
<input name="radio.1" value="3" type="radio">