Reputation: 23
I have HTML code:
<input type="checkbox" name="all" value="all">ALL
<input type="checkbox" name="agent" value="agent" >Agent
<input type="checkbox" name="company" value="company">Company
<input type="checkbox" name="branch" value="branch">Branch
If I check all, other checkbox becomes disabled, if I uncheck, other checkbox is back enabled.
I have tried doing this, using the Script below.
$("input[name='all']").change(function() {
if(this.checked) {
$("input[name='agent']").prop("disabled",true);
}
});
Upvotes: 2
Views: 1587
Reputation: 123
//I have added a id field in your first check box and add a class rest of checkboxes.
//This code is working you can use this
$(function(){
$('#all_employee').on('click',function(){
if($(this).is(':checked') === true){
$('.employee').prop('disabled','disabled');
}else{
$('.employee').prop("disabled", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="all" value="all" id="all_employee" >ALL
<input type="checkbox" name="agent" value="agent" class="employee" >Agent
<input type="checkbox" name="company" value="company" class="employee">Company
<input type="checkbox" name="branch" value="branch" class="employee">Branch
Upvotes: 1
Reputation: 1404
Bind a change handler, then just uncheck all of the checkboxes, apart from the one checked:
$('input').on('change', function() {
$('input').not(this).prop('checked', false); });
Upvotes: 0
Reputation: 261
Add missing else:
$("input[name='all']").change(function() {
if(this.checked) {
$("input[name='all'] input").prop("disabled",true);
}
else{
$("input[name='all'] input").prop("disabled",false);
}});
Upvotes: 0
Reputation: 82251
Your code will only do the part of disabling. You should rather use checked
value as disabled property to toggle state based on check/uncheck status:
var subinputs = $("input[name=agent],input[name=company],input[name=branch]");
$("input[name='all']").change(function() {
subinputs.prop("disabled",this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="all" value="all">ALL
<input type="checkbox" name="agent" value="agent" >Agent
<input type="checkbox" name="company" value="company">Company
<input type="checkbox" name="branch" value="branch">Branch
Upvotes: 1
Reputation: 2017
Please check below code, there are many other ways but for your HTML this is the way yo do this
$("input[name='all']").change(function() {
if(this.checked) {
$(this).siblings('input:checkbox').prop("disabled",true);
}
else {
$("input[type='checkbox']").removeAttr("disabled");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="all" value="all">ALL
<input type="checkbox" name="agent" value="agent" >Agent
<input type="checkbox" name="company" value="company">Company
<input type="checkbox" name="branch" value="branch">Branch
Upvotes: 0