ฉันต้องการสร้างตัวเลือกในรูปแบบที่ต้องการ

[] 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ซึ่งหมายความว่าทางขวาเพื่อปิดใช้งานด้วย 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>

ใช้งานได้กับ HTML เท่านั้นและไม่ใช่ XTML

หมายเหตุ:องค์ประกอบที่ปิดใช้งานจะไม่ถูกส่งไปพร้อมกับแบบฟอร์มตามที่ได้รับคำตอบในคำถามนี้: องค์ประกอบของฟอร์มที่ปิดใช้งานจะไม่ถูกส่ง

NOTE2:องค์ประกอบที่ถูกปิดใช้งานอาจเป็นสีเทา

Note3:

ตัวควบคุมฟอร์มที่ถูกปิดใช้งานต้องป้องกันเหตุการณ์การคลิกใด ๆ ที่จัดคิวไว้ในแหล่งงานการโต้ตอบผู้ใช้จากการถูกส่งไปยังองค์ประกอบ

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

คุณ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');
    }
});

คำถามที่ดี - ฉันคิดว่าวิธีเดียวที่จะบรรลุเป้าหมายนี้คือการกรองรายการในรายการที่เลือก
คุณสามารถทำได้ผ่านปลั๊กอิน jquery ตรวจสอบลิงค์ต่อไปนี้ซึ่งจะอธิบายวิธีการทำสิ่งที่คล้ายกับสิ่งที่คุณต้องการ ขอบคุณ
jQuery ปิดการใช้งานตัวเลือกที่เลือกขึ้นอยู่กับวิทยุที่เลือก (ต้องการการสนับสนุนสำหรับเบราว์เซอร์ทั้งหมด)