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

  • Angularjs concatenate string with multi-checkbox
  • Disable and gray out a checkbox label in Bootstrap
  • Shift + Click to Select a Range of Checkboxes
  • Ordering Checkbox and its label
  • How to add event listener for checkbox in Chrome extension's popup?
  • JQuery: if div is visible
  • multiple select checkbox in jquery
  • MVC3 Razor - at least one checkbox checked validation
  • How do you implement “check all” in react with child components?
  • Is there a way to check a form before submitting it to see if ANY of the checkboxes have been checked?
  • Change text next to checkbox IF checked. HTML + JS or jQuery
  • jqGrid multiselect “check all” in header: how to hide it?
  • 3 Solutions collect form web for “How to disable checkbox with jquery?”

    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

    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.

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