javascript — включить выпадающий список, если флажок не установлен … Dropdown не включен
Я пытаюсь включить раскрывающийся список, когда флажок установлен. Но когда я это делаю … Это не сработало. Пожалуйста, помогите мне здесь.
HTML:
<label class="checkbox-inline">
<input type="checkbox" value="" id="onstage">On Stage
</label><div class="col-md-9">
<select name="occupation" id="occupation" multiple="multiple" disabled="disabled">
<option value="Actor">Actor</option>
<option value="Supervisor">Supervisor</option>
<option value="Extra">Extra</option>
</select>
JQuery:
<script type="text/javascript">
$(function(){
$("#onstage").click(function(){
if($(this).is(":checked")){
$("#occupation").removeAttr("disabled");
$("#occupation").focus();
} else {
$("#occupation").attr("disabled", "disabled");
}
});
});
</script>
Решение
Если вы используете JQuery 3.2.1 тогда ваш код должен работать.
Проверьте один раз
1) У вас нет ошибки в другом js-коде (проверьте консоль на наличие ошибок)
2) Убедитесь, что идентификатор должен быть уникальным, поэтому вы должны иметь onstage а также occupation только один раз в документе
$(function(){
$("#onstage").click(function(){
if($(this).is(":checked")){
$("#occupation").removeAttr("disabled");
$("#occupation").focus();
} else {
$("#occupation").attr("disabled", "disabled");
}
});
});<label class="checkbox-inline">
<input type="checkbox" value="" id="onstage">On Stage
</label><div class="col-md-9">
<select name="occupation" id="occupation" multiple="multiple" disabled="disabled">
<option value="Actor">Actor</option>
<option value="Supervisor">Supervisor</option>
<option value="Extra">Extra</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>Другие решения
Вы должны использовать prop вместо attr для настройки disabled имущество, если вы используете JQuery 1.6+. Также вы можете упростить ваш код следующим образом:
$("#onstage").change(function(){
$("#occupation").prop("disabled", !$(this).is(":checked"));
if($(this).is(":checked")){
$("#occupation").focus();
}
});
Используйте $ («# профессия»). Attr («отключено», «верно»); в другом блоке
<script type="text/javascript">
$(function(){
$("#onstage").click(function(){debugger;
if($(this).is(":checked")){
$("#occupation").removeAttr("disabled");
$("#occupation").focus();
} else {
$("#occupation").attr("disabled", "true");
}
});
});
</script>
Если вы хотите удалить выбранное значение во время снятия флажка, вы можете использовать это:
$("#onstage").click(function(){
$("#occupation").prop("disabled", !$(this).is(":checked")).val('');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline">
<input type="checkbox" value="" id="onstage"/> On Stage
</label>
<div class="col-md-9">
<select name="occupation" id="occupation" multiple="multiple" disabled="disabled">
<option value="Actor">Actor</option>
<option value="Supervisor">Supervisor</option>
<option value="Extra">Extra</option>
</select>
</div>