Как отключить флажок с jquery?

Question

Я искал больше времени с ним, но это не работает, я хочу, чтобы флажок был отключен, пользователь не проверял и может проверить его, если какое-то условие. Хорошо, теперь я попробовал отключить их. Я использую 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 должен быть уникальным. У вас не может быть четырех флажков с одним и тем же идентификатором.

Вы можете попробовать другие селекторы, чтобы выбрать весь диапазон флажков, например .checkbox1 (по классу), input[type="checkbox"] (по тегу/атрибуту). Как только вы исправили идентификаторы, вы даже можете попробовать #chk1, #chk2, #chk3, #chk4.

В приведенном ниже фрагменте используется имя класса chk вместо id chk. Кроме того, он использует attr, чтобы установить атрибут, хотя он действительно работал для меня, используя prop.

$(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

Вы уже изменили ID, но вы также можете поместить класс в тот же атрибут, такие как:

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

Затем вы можете использовать JQuery, чтобы отключить или проверки того, checkbox в зависимости от ваших потребностей

Отключить:

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

К «ПРЕДВАРИТЕЛЬНАЯ ПРОВЕРКА»:

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

Вы можете изменить селектор, чтобы соответствовать идентификаторы и классы даже элементы и изменять свойства между истинным или ложным в соответствии с вашими потребностями.

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