Clash Royale CLAN TAG

How to make a checkbox unchecked based on another checkbox selection?

I have 6 checkboxes in my application.

<input type="checkbox" name="vehicle" id="vehicle1" value="one">one<br>
<input type="checkbox" name="vehicle" id="vehicle2" value="two">two<br>
<input type="checkbox" name="vehicle" id="vehicle3 value="three">three<br>
<input type="checkbox" name="vehicle" id="vehicle4" value="four">four<br>
<input type="checkbox" name="vehicle" id="vehicle5" value="five">five<br>
<input type="checkbox" name="vehicle" id="all" value="all">all<br>


And I have this jquery function, which would disable every other checkbox if the "all" checkbox is clicked.

$("#all").change(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}
else{
$inputs.prop('disabled',false);
}
});


If I select a checkbox other than the "all" checkbox, I have this following code which would disable the "all" checkbox.

$("[type=checkbox]").click(function() {
if((this.value == "one") || (this.value == "two") || (this.value == "three") || (this.value == "four") || (this.value == "five")){
$( "#all" ).prop( 'disabled', true );
}
else{
$( "#all" ).prop( 'disabled', false );
}
});


My problem here is, if I try to uncheck a checkbox after selecting it, this "all" checkbox is still disabled. I want it to be enabled once any checkbox is unchecked. Can you guys please help me with this?

"

id="vehicle3

1 Answer
1

You need to verify if any checkbox if checked so disable the all checkbox else enable it.

all

enable

So you could use $(":checkbox:not(#all)") selector to attach the event to those checkboxes who are different to #all.

$(":checkbox:not(#all)")

#all

$("#all").change(function() {
var $inputs = $('input:checkbox');

if ($(this).is(':checked')) {
$inputs.not(this).prop('disabled', true);
} else {
$inputs.prop('disabled', false);
}
});

$(":checkbox:not(#all)").click(function() {
if ($(":checkbox:not('#all'):checked").length > 0) {
$("#all").prop('disabled', true);
} else {
$("#all").prop('disabled', false);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" name="vehicle" id="vehicle1" value="one">one<br>
<input type="checkbox" name="vehicle" id="vehicle2" value="two">two<br>
<input type="checkbox" name="vehicle" id="vehicle3" value="three">three<br>
<input type="checkbox" name="vehicle" id="vehicle4" value="four">four<br>
<input type="checkbox" name="vehicle" id="vehicle5" value="five">five<br>
<input type="checkbox" name="vehicle" id="all" value="all">all<br>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.