jQuery를 사용하여 선택 필드를 비활성화/활성화하는 방법?

jQuery를 사용하여 선택 필드를 비활성화/활성화하는 방법?

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

[] 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=. 하지만 아무 일도 일어나지 않습니다.A에 지원할 때<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에 의해 명시된 선택 요소의 Boolean Attribute이며, 이는 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 reference).

그러나 그것을 재산으로 사용할 수도 있습니다.

jQuery("#selectId").prop('disabled', 'disabled');

점점 ~하다

<select id="selectId" name="gender" disabled>

HTML에만 적용되고 XTML에는 적용되지 않습니다.

참고: 비활성화된 요소는 이 질문에 답변된 양식과 함께 제출되지 않습니다.비활성화된 양식 요소가 제출되지 않았습니다.

참고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 링크

오래된 스레드로 대답해서 미안하지만 내 코드가 앞으로 다른 사람에게 도움이 될 수 있기를 바랍니다. 나는 체크박스를 선택하면 선택된 입력 필드가 거의 없을 것이고 그렇지 않으면 비활성화되는 시나리오와 동일했습니다.

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

당신의.select신분증은 없고 이름만 있습니다.선택기를 수정해야 합니다.

$("#pizza").on("click", function(){
  $("select[name='pizza_kind']").prop("disabled", !this.checked);
});

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

좋은 질문입니다. 이를 달성하기 위한 유일한 방법은 선택 항목에서 항목을 필터링하는 것입니다.
jquery 플러그인을 통해 이 작업을 수행할 수 있습니다.다음 링크를 확인해 보십시오. 이 링크에는 필요한 것과 유사한 것을 달성하는 방법이 설명되어 있습니다.감사해요.
사용 안 함jQuery 선택한 라디오에 따라 SELECT 옵션 사용 안 함(모든 브라우저 지원 필요)

선택을 비활성화하려면:

$("#your-selector").prop("disabled", true);

선택을 활성화하려면:

$("#your-selector").prop("disabled", false); 

언급URL : https://stackoverflow.com/questions/10570070/how-to-disable-enable-select-field-using-jquery