다음과 같은 형식으로 옵션을 만들고 싶습니다.
[] I would like to order a [selectbox with pizza] pizza
여기서 selectbox는 확인란이 선택된 경우에만 활성화되고 선택하지 않은 경우 비활성화됩니다.
이 코드를 생각해 냈습니다.
<form>
<input type="checkbox" id="pizza" name="pizza" value="yes"> <label for="pizza">
I would like to order a</label>
<select name="pizza_kind">
<option>(choose one)</option>
<option value="margaritha">Margaritha</option>
<option value="hawai">Hawai</option>
</select>
pizza.
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script>
var update_pizza = function () {
if ($("#pizza").is(":checked")) {
$("#pizza_kind").removeAttr("disabled");
}
else {
$("#pizza_kind").prop('disabled', 'disabled');
}
};
$(update_pizza);
$("#pizza").change(update_pizza);
</script>
나는 방법을 사용하여 비활성화 속성을 설정하는 다양한 방법을 시도 .prop()
, .attr()
및 .disabled=
. 그러나 아무 일도 일어나지 않습니다. <input type="checkbox">
대신에 적용 <select>
하면 코드가 완벽하게 작동합니다.
<select>
jQuery를 사용 하여 비활성화 / 활성화하는 방법은 무엇입니까?
답변
다음과 같은 코드를 사용하고 싶습니다.
<form>
<input type="checkbox" id="pizza" name="pizza" value="yes">
<label for="pizza">I would like to order a</label>
<select id="pizza_kind" name="pizza_kind">
<option>(choose one)</option>
<option value="margaritha">Margaritha</option>
<option value="hawai">Hawai</option>
</select>
pizza.
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var update_pizza = function () {
if ($("#pizza").is(":checked")) {
$('#pizza_kind').prop('disabled', false);
}
else {
$('#pizza_kind').prop('disabled', 'disabled');
}
};
$(update_pizza);
$("#pizza").change(update_pizza);
</script>
여기에 실례가 있습니다
답변
선택을 비활성화 / 활성화하려면 먼저 선택 중 ID 또는 클래스가 필요합니다. 그런 다음 다음과 같이 할 수 있습니다.
비활성화 :
$('#id').attr('disabled', 'disabled');
사용 :
$('#id').removeAttr('disabled');
답변
Disabled는 WHATWG에 명시된 select 요소 의 부울 속성 입니다. 즉, jQuery를 사용하여 비활성화 할 올바른 방법 은 다음과 같습니다.
jQuery("#selectId").attr('disabled',true);
이것은이 HTML을 만들 것입니다
<select id="selectId" name="gender" disabled="disabled">
<option value="-1">--Select a Gender--</option>
<option value="0">Male</option>
<option value="1">Female</option>
</select>
이것은 XHTML과 HTML 모두에서 작동합니다 (W3School 참조).
그러나 속성으로 사용하여 수행 할 수도 있습니다
jQuery("#selectId").prop('disabled', 'disabled');
점점
<select id="selectId" name="gender" disabled>
XTML이 아닌 HTML에서만 작동합니다.
참고 : 이 질문에 답변 된대로 비활성화 된 요소는 양식과 함께 제출되지 않습니다 . 비활성화 된 양식 요소는 제출되지 않습니다
참고 2 : 비활성화 된 요소가 회색으로 표시 될 수 있습니다.
노트 3:
비활성화 된 양식 컨트롤은 사용자 상호 작용 작업 소스에 대기중인 클릭 이벤트가 요소에서 전달되지 않도록해야합니다.
TL; DR
<script>
var update_pizza = function () {
if ($("#pizza").is(":checked")) {
$('#pizza_kind').attr('disabled', false);
} else {
$('#pizza_kind').attr('disabled', true);
}
};
$(update_pizza);
$("#pizza").change(update_pizza);
</script>
답변
단순히 다음을 사용하십시오.
var update_pizza = function () {
$("#pizza_kind").prop("disabled", !$('#pizza').prop('checked'));
};
update_pizza();
$("#pizza").change(update_pizza);
답변
다음을 사용하십시오.
$("select").attr("disabled", "disabled");
또는 단순히 추가 id="pizza_kind"
로 <select>
같은 태그 <select name="pizza_kind" id="pizza_kind">
: jsfiddle 링크
코드가 작동하지 않는 이유 $("#pizza_kind")
는 <select>
요소가 없기 때문에 요소를 선택 하지 않기 때문 id="pizza_kind"
입니다.
편집 : 실제로, 더 나은 선택기는 $("select[name='pizza_kind']")
다음과 같습니다. jsfiddle link
답변
귀하 select
는 ID가없고 이름 만 있습니다. 선택기를 수정해야합니다.
$("#pizza").on("click", function(){
$("select[name='pizza_kind']").prop("disabled", !this.checked);
});
답변
이전 스레드에서 응답하여 죄송하지만 나중에 내 코드가 도움이 될 수 있습니다. 확인란을 선택하면 선택한 입력 필드가 다른 현명하게 비활성화되는 동일한 시나리오에 있습니다.
$("[id*='chkAddressChange']").click(function () {
var checked = $(this).is(':checked');
if (checked) {
$('.DisabledInputs').removeAttr('disabled');
} else {
$('.DisabledInputs').attr('disabled', 'disabled');
}
});