jQuery - ช่องทำเครื่องหมายเปิด / ปิดการใช้งาน

ฉันมีช่องทำเครื่องหมายมากมายเช่นนี้ หากเลือกช่องทำเครื่องหมาย "ตรวจสอบฉัน" ช่องทำเครื่องหมายอีก 3 ช่องควรเปิดใช้งานทั้งหมดมิฉะนั้นจะต้องปิดการใช้งาน ฉันจะทำสิ่งนี้โดยใช้ jQuery ได้อย่างไร

<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9">Check Me
<input type="checkbox" name="chk9[120]">
<input type="checkbox" name="chk9[140]">
<input type="checkbox" name="chk9[150]">
</form>

เปลี่ยนมาร์กอัปของคุณเล็กน้อย:

$(function() {
  enable_cb();
  $("#group1").click(enable_cb);
});

function enable_cb() {
  if (this.checked) {
    $("input.group1").removeAttr("disabled");
  } else {
    $("input.group1").attr("disabled", true);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmChkForm" id="frmChkForm">
  <input type="checkbox" name="chkcc9" id="group1">Check Me <br>
  <input type="checkbox" name="chk9[120]" class="group1"><br>
  <input type="checkbox" name="chk9[140]" class="group1"><br>
  <input type="checkbox" name="chk9[150]" class="group1"><br>
</form>

คุณสามารถทำได้โดยใช้ตัวเลือกแอ็ตทริบิวต์โดยไม่ต้องแนะนำ ID และคลาส แต่มันจะช้ากว่าและ (imho) อ่านยากขึ้น

นี่คือทางออกที่ทันสมัยที่สุด

<form name="frmChkForm" id="frmChkForm">
    <input type="checkbox" name="chkcc9" id="group1" />Check Me
    <input type="checkbox" name="chk9[120]" class="group1" />
    <input type="checkbox" name="chk9[140]" class="group1" />
    <input type="checkbox" name="chk9[150]" class="group1" />
</form>

$(function() {
    enable_cb();
    $("#group1").click(enable_cb);
});

function enable_cb() {
    $("input.group1").prop("disabled", !this.checked);
}

นี่คือรายละเอียดการใช้งานสำหรับการและ.attr().prop()

jQuery 1.6+

ใช้.prop()ฟังก์ชั่นใหม่:

$("input.group1").prop("disabled", true);
$("input.group1").prop("disabled", false);

jQuery 1.5 และต่ำกว่า

ฟังก์ชั่นไม่สามารถใช้ได้ดังนั้นคุณจำเป็นต้องใช้.prop().attr()

หากต้องการปิดใช้งานช่องทำเครื่องหมาย (โดยการตั้งค่าของคุณสมบัติที่ปิดใช้งาน) ให้ทำ

$("input.group1").attr('disabled','disabled');

และสำหรับการเปิดใช้งาน (โดยลบแอตทริบิวต์ทั้งหมด) ทำ

$("input.group1").removeAttr('disabled');

jQuery ทุกรุ่น

DOMElement.disabled = trueหากคุณกำลังทำงานที่มีเพียงองค์ประกอบหนึ่งก็มักจะเป็นที่เร็วที่สุดในการใช้งาน ประโยชน์ในการใช้งาน.prop()และ.attr()ฟังก์ชั่นคือพวกมันจะทำงานกับองค์ประกอบที่ตรงกันทั้งหมด

// Assuming an event handler on a checkbox
if (this.disabled)

อ้างอิง: การตั้งค่า "ตรวจสอบ" สำหรับช่องทำเครื่องหมายด้วย jQuery?

<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="chkAll">Check Me
<input type="checkbox" name="chk9[120]" class="chkGroup">
<input type="checkbox" name="chk9[140]" class="chkGroup">
<input type="checkbox" name="chk9[150]" class="chkGroup">
</form>

$("#chkAll").click(function() {
   $(".chkGroup").attr("checked", this.checked);
});

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

$(".chkGroup").click(function() {
  $("#chkAll")[0].checked = $(".chkGroup:checked").length == $(".chkGroup").length;
});

นี่คืออีกตัวอย่างโดยใช้ JQuery 1.10.2

$(".chkcc9").on('click', function() {
            $(this)
            .parents('table')
            .find('.group1') 
            .prop('checked', $(this).is(':checked')); 
});