태그 보관물: forms

forms

jQuery를 사용하여 선택 필드를 비활성화 / 활성화하는 방법은 무엇입니까? 비활성화됩니다. 이 코드를 생각해 냈습니다. <form> <input type=”checkbox” id=”pizza” name=”pizza”

다음과 같은 형식으로 옵션을 만들고 싶습니다. 

[] 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);

DEMO

답변

다음을 사용하십시오.

$("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);
});

데모 : http://jsbin.com/imokuj/2/edit

답변

이전 스레드에서 응답하여 죄송하지만 나중에 내 코드가 도움이 될 수 있습니다. 확인란을 선택하면 선택한 입력 필드가 다른 현명하게 비활성화되는 동일한 시나리오에 있습니다. 

$("[id*='chkAddressChange']").click(function () {
    var checked = $(this).is(':checked');
    if (checked) {
        $('.DisabledInputs').removeAttr('disabled');
    } else {
        $('.DisabledInputs').attr('disabled', 'disabled');
    }
});