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

Question

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?

Missing " after id="vehicle3

manassehkatz-Moving 2 Codidact
– manassehkatz-Moving 2 Codidact

2018-07-26 17:30:59 +00:00
Commented Jul 26, 2018 at 17:30 — manassehkatz-Moving 2 Codidact
– manassehkatz-Moving 2 Codidact, Commented Jul 26, 2018 at 17:30

Zakaria Acharki · Accepted Answer · 2018-07-27 08:14:31Z

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

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

Then for the condition you've to verify all the chekcbox's not just the clicked current one $(":checkbox:not('#all'):checked").length > 0.

$("#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>

Shorten version snippet:

$(":checkbox").click(function() {
  if ($(this).is("#all")) {
    $(":checkbox:not('#all')").prop('disabled', $(this).is(':checked'));
  } else {
    $("#all").prop('disabled', $(":checkbox:not('#all'):checked").length);
  }
});

<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>

You're welcome, brother... Not sure why you chose to use the heavy version instead of the simple one :D ? Do you have any reason for this choice?!!

mpm · Accepted Answer · 2018-07-26 18:13:55Z

Without jQuery, in pure DOM with event delegation.

var $$ = s => Array.from(document.querySelectorAll(s))
var $ = s => document.querySelector(s)

// listen to input event
document.body.addEventListener('input', function(e) {
  var target = e.target;
  var all;
  // when input event
  switch (true) {
    // if all, then disable other inputs
    case target.matches('input[name="vehicle"][value="all"]'):
      $$('input[name="vehicle"]:not([value="all"])')
        .forEach(
          element => element.disabled = target.checked)
      return false
    case target.matches("input[name='vehicle']:not([value='all'])"):
      $('input[name="vehicle"][value="all"]').disabled =
        $('input[name="vehicle"]:checked');
      return false;
  }
})

<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>

Helping hand · Accepted Answer · 2018-07-26 18:04:49Z

Loop through your input boxes and if all boxes are unchecked, enable the all checkbox.

For this I added a checker function, which checks if all boxes are unchecked or not. If all are unchecked, then enable the last checkbox.

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

  $("[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 );
    }
    checker()
  });


  function checker(){
    var flag=0;
    $('input[type=checkbox]').each(function () {
      if(this.checked && $(this).val()!='all'){
         console.log($(this).val())
         flag=1;
      }
    });
    if(flag==0){
     $( "#all" ).prop( 'disabled', false );
    }
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.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>

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related