Header menu

_________________________________________________________________________________

Monday, 26 August 2013

How to disable checkbox set using jquery ?

If you got two set of checkboxes and you have to use one at a time ... then using this code when you click on either of checkbox set .. the other will get disabled..



<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
    $( document ).on("click",function(){
        if($("input[name='test[]']:checked").val()){
        $('input:checkbox[name="test_2\[\]"]').attr('disabled', true);
        }
        if($("input[name='test_2[]']:checked").val()){
        $('input:checkbox[name="test\[\]"]').attr('disabled', true);
        }
        });
});
</script>
</head>
<body>


<form id="test_form">
    <b> Checkboxes1</b><br>
<input type="checkbox" name="test[]"   value="Test1">Test1<br>
<input type="checkbox" name="test[]"  value="Test2">Test2 <br>
<input type="checkbox" name="test[]"   value="Test3">Test3<br>
<input type="checkbox" name="test[]"  value="Test4">Test4 <br>
<b> Checkboxes2</b><br>
<input type="checkbox" name="test_2[]"   value="Test1">Test1<br>
<input type="checkbox" name="test_2[]"  value="Test2">Test2 <br>
<input type="checkbox" name="test_2[]"   value="Test3">Test3<br>
<input type="checkbox" name="test_2[]"  value="Test4">Test4 <br>
</form>

</body>
</html>