CODEWITHSUNDEEP
javascriptjquerycheckbox
Brian Crist
Brian Crist

Reputation: 814

How to disable checkbox with jquery?

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);
});

Upvotes: 7

Views: 57593

Answers (3)

GolezTrol
GolezTrol

Reputation: 116200

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

Upvotes: 13

sachin kumar
sachin kumar

Reputation: 159

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);
});

Upvotes: 1

Yann Poir&#233;
Yann Poir&#233;

Reputation: 134

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.

Upvotes: 1

Related Questions