如何使用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);
});

Answer 1

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 

Answer 2

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.

Answer 3

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