jquery toggle other checkbox if a user clicks on one checkbox

Question

I have two checkboxes "obsolete" and "pending". If a user clicks on one of the two checkboxes, then the other checkbox should be disabled. If the user unselect one checkbox then both of the checkboxes should be selectable.

$(document).ready(function(){
      $("input.obsolete").click(toggle_checkbox());
      $("input.pending").click(toggle_checkbox());
    });
    
    function toggle_checkbox() {
      if($('input.obsolete').checked) {
        $("input.pending").attr("disabled", true);
      } else {
        $("input.pending").removeAttr("disabled");
      };
    
      if($('input.pending').checked) {
        $("input.obsolete").attr("disabled", true);
      }  else {
        $("input.obsolete").removeAttr("disabled");
      };
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" value="1" name="job[invoice_sent]" id="job_invoice_sent"> 
      obsolete
      <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" value="1" name="job[invoice_sent]" id="job_invoice_sent"> 
      pending 
    </div>

But I still can click on both checkboxes. What am I missing?

#ID you can only use once. And what you want to use is radio-buttons. — deEr.
– deEr., Commented Apr 3, 2018 at 12:56
You should be using radio buttons for this... also, never use attrr() or removeAttr() for boolean attributes and properties. Use prop() instead. — Terry
– Terry, Commented Apr 3, 2018 at 12:56

Scaramouche · Accepted Answer · 2018-04-03 12:56:07Z

1

Here:

$(document).ready(function(){
  $('input:checkbox').click(function(){
    $(this).siblings('input:checkbox').prop('disabled', $(this).is(':checked'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" value="1" name="job[invoice_sent]" id="job_invoice_sent"> 
  obsolete
  <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" value="1" name="job[invoice_sent]" id="job_invoice_sent"> 
  pending 
</div>

answered Apr 3, 2018 at 12:56

Scaramouche

3,2574 gold badges23 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yajiv · Accepted Answer · 2018-04-03 12:58:50Z

There is nothing $('input.pending').checked in jQuery, instead use $('input.pending').is(":checked")

$(document).ready(function(){
  $("input.obsolete").click(toggle_checkbox);
  $("input.pending").click(toggle_checkbox);
});

function toggle_checkbox() {
    $("input.pending").attr("disabled", $('input.obsolete').is(":checked"));

    $("input.obsolete").attr("disabled", $('input.pending').is(":checked"));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" value="1" name="job[invoice_sent]" class="obsolete" id="job_invoice_sent"> 
  obsolete
  <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" value="1" name="job[invoice_sent]" class="pending" id="job_invoice_sent"> 
  pending 
</div>

Lead Developer · Accepted Answer · 2018-04-03 13:08:36Z

$(document).ready(function(){
      $("input.obsolete").click(toggle_checkbox);
      $("input.pending").click(toggle_checkbox);
    });
    
    function toggle_checkbox() {
      if($('input.obsolete').prop('checked')) {
        $("input.pending").attr("disabled", true);
      } else {
        $("input.pending").removeAttr("disabled");
      };
    
      if($('input.pending').prop('checked')) {
        $("input.obsolete").attr("disabled", true);
      }  else {
        $("input.obsolete").removeAttr("disabled");
      };
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" value="1" name="job[invoice_sent]" id="job_invoice_sent" class="obsolete"> 
      obsolete
      <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" value="1" name="job[invoice_sent]" id="job_invoice_sent" class="pending"> 
      pending 
    </div>

To change your code to work, Please change like below.

add class name to checkbox like below

<input type="checkbox" value="1" name="job[invoice_sent]"
 id="job_invoice_sent" class="obsolete"> obsolete 

<input type="checkbox" value="1" name="job[invoice_sent]"
 id="job_invoice_sent" class="pending">pending

Change some code.

FROM

$("input.obsolete").click(toggle_checkbox());

$("input.pending").click(toggle_checkbox());

TO

$("input.obsolete").click(toggle_checkbox);

$("input.pending").click(toggle_checkbox);

change if statement like below

if($('input.obsolete').prop('checked')) {

// some code

}

~~~~~~~~~~

BUT I SUGGEST YOU TO USE "RADIO" NOT THE CHECKBOX FOR LIKE THIS REASON!!

Kristianmitk · Accepted Answer · 2018-04-03 13:17:25Z

You could simplify your code and assign an event handler for all input:checkbox elements instead of making it separately.

Here an simple snippet by making use of jQueries not() function:

$(document).ready(function(){
  $('input:checkbox').on('change', function() {
      $('input:checkbox').not(this).prop('checked', false);  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <input name="job[invoice_sent]" type="hidden" value="0">
      <input type="checkbox" value="1" name="job[invoice_sent]" id="job_invoice_sent"> 
      obsolete
      <input name="job[invoice_sent]" type="hidden" value="0">
      <input type="checkbox" value="1" name="job[invoice_sent]" id="job_invoice_sent"> 
      pending 
    </div>

NOTE:

It would be easier in your case to use radio-inputs instead of dealing with checkboxes. Simply assign all radio-inputs the same name attribute and you get your desired behaviour

DEMO:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
      <input name="job[invoice_sent]" type="hidden" value="0">
      <input type="radio" value="pending" name="example">pending
      <input name="job[invoice_sent]" type="hidden" value="0">
      <input type="radio" value="obsolete" name="example">obsolete
</form>

SantoshK · Accepted Answer · 2018-04-03 13:19:02Z

First you need to add one className in your all checkbox input type and use below concept to implement

$('input[class^="class"]').click(function() {
    var $this = $(this);
   if ($this.is(".className")) {
        if ($this.is(":checked")) {
           
            $(".className").not($this).prop({ disabled: true, checked: false });
        } 
        else{
        
            $(".className").not($this).prop({ disabled: false, checked: false });
        
        }
        }
});

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

  <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" class="className" value="1" name="abcd" id="job_invoice_sent"> 
  obsolete
  <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" class="className" value="1" name="job[invoice_sent]" id="job_invoice_sent"> 
  pending 
</div>

Collectives™ on Stack Overflow

jquery toggle other checkbox if a user clicks on one checkbox

5 Answers 5

Comments

Comments

Comments

NOTE:

DEMO:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

NOTE:

DEMO:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related