Enable and disable check boxes using javascript

Question

I have a data table and it includes two check boxes called Manufacturing Defects and Scrap Items.I need to disable Scrap Items,when I check the Manufacturing Defects vise versa. Please help me to find the answer. Bellow is my code part, I used to create checkboxes

row += '<td class="Item_Rejected1">' + '<input type="checkbox" name="active" value="checked" class="form-control input-sm" onchange="isActive()">' + '</td>';
row += '<td class="Item_Rejected2">' + '<input type="checkbox" name="active" value="checked" class="form-control input-sm" onchange="isActive()">' + '</td>';

Here, disable means what ? you need to uncheck other one or disable ? — pathe.kiran, May 27 '16 at 04:51
FYI the accepted answer is the poorest one among all answers mixing jQuery selectors and native selectors with lots of unnecessary DOM queries and duplicate code... . — T J, May 27 '16 at 06:12

score 1 · Answer 1 · answered May 27 '16 at 04:51

(1) Detect click on any checkbox
(2) Uncheck ALL checkboxes
(3) Check the checkbox that was clicked

/*  javascript/jQuery  */
$('input[type=checkbox]').click(function(){
    $('input[type=checkbox]').prop('checked',false);
    $(this).prop('checked',true);
});

<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="Item_Rejected1">
      IR1 <input type="checkbox" name="active" value="checked" class="form-control input-sm">
    </td>
    <td class="Item_Rejected2">
      IR2 <input type="checkbox" name="active" value="checked" class="form-control input-sm">
    </td>
  </tr>
</table>

Thank You!!! It is working :) – Rasika May 27 '16 at 05:38 — Rasika, May 27 '16 at 05:38

score 0 · Answer 2 · answered May 27 '16 at 05:00

Use .not(SELECTOR) to exclude current element

$('input[type="checkbox"]').change(function() {
  if (this.checked)
    $('input[type="checkbox"]').not(this).prop('checked', !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="Item_Rejected1">
      IR1
      <input type="checkbox" name="active" value="checked" class="form-control input-sm">
    </td>
    <td class="Item_Rejected2">
      IR2
      <input type="checkbox" name="active" value="checked" class="form-control input-sm">
    </td>
  </tr>
</table>

score 0 · Answer 3 · answered May 27 '16 at 05:27

One more answer,

   

 $('input[type="checkbox"]').click(function() {
      if (this.checked)
        $('input[type="checkbox"]').attr('checked',false);
         $(this).prop('checked',true);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="Item_Rejected1">
      IR1
      <input type="checkbox" name="active" value="checked" class="form-control input-sm">
    </td>
    <td class="Item_Rejected2">
      IR2
      <input type="checkbox" name="active" value="checked" class="form-control input-sm">
    </td>
  </tr>
</table>

abhilash-ram · Accepted Answer · 2016-05-27T05:51:49.847

Here is the actual answer as requested by Rasika. Dont change the questions. It is the answer for that one. I got output .

[Here is the output] https://jsfiddle.net/Abhilash1994/btmfuwsg/

Manufacturer: <input type="checkbox" id="myCheck"> 
Scrap: <input type="checkbox" id="myCheck1">
    <script>
      $(document).ready(function() {
        $('#myCheck').change(function() {
            if ($(this).prop('checked')) {
                document.getElementById("myCheck1").disabled=true;
            }
            else {
               document.getElementById("myCheck1").disabled=false;
            }
        });
        $('#myCheck1').change(function() {
            if ($(this).prop('checked')) {
                document.getElementById("myCheck").disabled=true;
            }
            else {
               document.getElementById("myCheck").disabled=false;
            }
        });
    });
    </script>

may i know the reason for downvote. It will be the answer. – abhilash-ram May 27 '16 at 06:54 — abhilash-ram, May 27 '16 at 06:54

Enable and disable check boxes using javascript

4 Answers4