jquery checkbox disable/uncheck

Question

I have 2 checkboxes as below. The 2nd one should be clickable only if the 1st one checked. This I managed to do.

But if the first one is unchecked, the second one should be disabled and unchecked as well.

$(document).ready(function() {
  var ckbox = $('#optin');

  $('input').on('click', function() {
    if (ckbox.is(':checked')) {
      $('#tc').removeAttr('disabled'); //enable input

    } else {
      $('#tc').prop('checked', false); //remove check
      $('#tc').removeAttr('checked'); //disable input

    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="optin" id="optin" class="required">
<label for="optin"> Checkbox1 </label>

<input type="checkbox" name="tc" id="tc" class="" disabled="disabled">
<label for="tc"> Checkbox2  </label>

j08691 · Accepted Answer · 2017-03-13 16:53:02Z

1

I'd do it like this:

$(document).ready(function() {
  $('input').on('click', function() {
    $('#tc').prop({
      'checked': $('#optin').is(':checked'),
      'disabled': !$('#optin').is(':checked')
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="optin" id="optin" class="required">
<label for="optin"> Checkbox1 </label>

<input type="checkbox" name="tc" id="tc" class="" disabled="disabled">
<label for="tc"> Checkbox2  </label>

answered Mar 13, 2017 at 16:53

j08691

208k33 gold badges269 silver badges281 bronze badges

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

2 Comments

komu4 Over a year ago

It should be possible to only check checkbox1

j08691 Over a year ago

I don't understand what you mean by that. Do you mean like jsfiddle.net/q01p2gf1?

MrCode · Accepted Answer · 2017-03-13 17:12:16Z

0

In the else you're trying to remove the checked attribute. Instead set the disabled property to true.

$(document).ready(function() {
  var ckbox = $('#optin');

  $('input').on('click', function() {
    if (ckbox.is(':checked')) {
      $('#tc').removeAttr('disabled'); //enable input

    } else {
      $('#tc').prop('checked', false); //remove check
      $('#tc').prop('disabled', true); //disable input

    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="optin" id="optin" class="required">
<label for="optin"> Checkbox1 </label>

<input type="checkbox" name="tc" id="tc" class="" disabled="disabled">
<label for="tc"> Checkbox2  </label>

edited Mar 13, 2017 at 17:12

answered Mar 13, 2017 at 16:51

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Collectives™ on Stack Overflow

jquery checkbox disable/uncheck

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related