How to disable checkbox with jquery?

Question

I searched more time with it but it's not work, I want to checkbox is disabled, user not check and can check it if some condition. Ok, now, I tried disabled them. I use jquery 2.1.3

 <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="U01" />Banana
 <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="U02" />Orange
 <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="U03" />Apple
 <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="U04" />Candy

$(window).load(function () {
    $('#chk').prop('disabled', true);
});

GolezTrol · Accepted Answer · 2016-12-12 11:57:26Z

13

id should be unique. You cannot have four checkboxes with the same id.

You can try other selectors to select the whole range of checkboxes, like .checkbox1 (by class), input[type="checkbox"] (by tag/attribute). Once you've fixed the ids, you could even try #chk1, #chk2, #chk3, #chk4.

The snippet below uses the classname 'chk' instead of the id 'chk'. Also, it uses attr to set the attribute although it did work for me using prop as well.

$(window).load(function() {
  $('.chk').attr('disabled', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="chk" name="check[]" value="U01" />Banana
<input type="checkbox" class="chk" name="check[]" value="U02" />Orange
<input type="checkbox" class="chk" name="check[]" value="U03" />Apple
<input type="checkbox" class="chk" name="check[]" value="U04" />Candy

edited Dec 12, 2016 at 11:57

answered Jun 14, 2015 at 7:04

GolezTrol

116k19 gold badges186 silver badges215 bronze badges

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

4 Comments

Saumil Over a year ago

this will not work without disabled property defined

Saumil Over a year ago

maybe it depends on browser

Roko C. Buljan Over a year ago

You removed the duplicate ID, so you could've done with class="chk"

Brian Crist Over a year ago

That's right. I should remove id="chk" and use class="chk" . Thank you.

Yann Poiré · Accepted Answer · 2015-06-14 08:34:58Z

1

You already changed the ID but you can also put the class in the same attribute such as:

<input type="checkbox" class="checkbox1 chk" name="check[]" value="U01" />Banana

Then you can use jQuery to either disable or check a checkbox depending on you needs like so

To disable:

$(function () {
    $('.chk').prop('disabled', true);
});

To "precheck":

$(function () {
    $('.chk').prop('checked', true);
});

You can change the selector to fit IDs or classes even elements and change the properties between true or false according to your needs.

answered Jun 14, 2015 at 8:34

Yann Poiré

1346 bronze badges

Comments

sachin kumar · Accepted Answer · 2015-06-14 08:36:33Z

1

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox1" class="chk" name="check[]" value="U01" />Banana
<input type="checkbox" class="checkbox1" class="chk" name="check[]" value="U02" />Orange
<input type="checkbox" class="checkbox1" class="chk" name="check[]" value="U03" />Apple
<input type="checkbox" class="checkbox1" class="chk" name="check[]" value="U04" />Candy

Javascript/jQuery

$(function() {
   $("input.checkbox1").prop("disabled", true);
});

answered Jun 14, 2015 at 8:36

sachin kumar

1691 gold badge1 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to disable checkbox with jquery?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related