CODEWITHSUNDEEP
javascriptjquerycheckbox
Trinity76
Trinity76

Reputation: 665

jquery toggle other checkbox if a user clicks on one checkbox

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?

Upvotes: 1

Views: 616

Answers (5)

SantoshK
SantoshK

Reputation: 1877

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>

Upvotes: 0

Kristianmitk
Kristianmitk

Reputation: 4778

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>

Upvotes: 0

Lead Developer
Lead Developer

Reputation: 1169

$(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.

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

  1. 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);

  1. 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!!

Upvotes: 0

yajiv
yajiv

Reputation: 2941

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>

Upvotes: 0

Scaramouche
Scaramouche

Reputation: 3267

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>

Upvotes: 1

Related Questions