jQuery - चेकबॉक्स सक्षम / अक्षम

Question

मेरे पास इस तरह के चेकबॉक्स का एक गुच्छा है। यदि "चेक मी" चेकबॉक्स चेक किया गया है, तो अन्य सभी 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>

Answer 1

अपना मार्कअप थोड़ा बदलें:

$(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>

आप आईडी और कक्षाओं को शुरू किए बिना विशेषता चयनकर्ताओं का उपयोग करके ऐसा कर सकते हैं, लेकिन यह धीमा है और पढ़ने में कठिन है।

Comments

अक्षम करने वाले भाग के लिए, इस url को आज़माएं: jquery-howto.blogspot.com/2008/12/…

— वॉल्ट

यह सीधे प्रश्न से संबंधित नहीं है, लेकिन IE में चेक ईवेंट फ़ोकस को तब तक फायर नहीं करेगा जब तक कि फ़ोकस खो न जाए। मैं आमतौर $(this).changeपर पहले चेकबॉक्स के क्लिक इवेंट पर कॉल करता हूं ।

— mcrumley

आप उपयोग कर सकते हैं .prop()के बजाय .attr()।

— रेजा ओवेलियाई

मुझे .prop () के साथ समस्या थी, यह प्रारंभिक सेट पर काम करता था, लेकिन अगर मैं आगे और पीछे टॉगल करता हूं, तो दूसरी बार यह चेकबॉक्स को "अक्षम" करने में विफल रहा। मैं अटेर () के साथ फंस गया।

— प्रोवेगा

@ProVega यह आपकी समस्या की व्याख्या कर सकता है।

— एंड्रयू

Answer 2

यह सबसे अद्यतित समाधान है।

<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 के साथ एक चेकबॉक्स के लिए "चेक" सेट करना?

Comments

उन लोगों के लिए जो एक एस्प का उपयोग कर रहे हैं: खुद की तरह चेकबॉक्स, यह एक स्पैन के भीतर एक इनपुट के रूप में ब्राउज़र में प्रदान करता है। तो मेरे मामले में, मुझे इसे jQuery के साथ $ ('चेकबॉक्सक्लासमन इनपुट') के रूप में एक्सेस करना था। प्रोप ('अक्षम', गलत) ... और 'सक्षम' को बदलने की कोशिश ने मेरे लिए काम नहीं किया :) इस जवाब के लिए!

— डेबस

Answer 3

<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;
});

Answer 4

यहाँ JQuery 1.10.2 का उपयोग कर एक और नमूना दिया गया है

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

Answer 5

$(document).ready(function() {
  $('#InventoryMasterError').click(function(event) { //on click
    if (this.checked) { // check select status
      $('.checkerror').each(function() { //loop through each checkbox
        $('#selecctall').attr('disabled', 'disabled');
      });
    } else {
      $('.checkerror').each(function() { //loop through each checkbox
        $('#selecctall').removeAttr('disabled', 'disabled');
      });
    }
  });

});

$(document).ready(function() {
  $('#selecctall').click(function(event) { //on click
    if (this.checked) { // check select status
      $('.checkbox1').each(function() { //loop through each checkbox
        $('#InventoryMasterError').attr('disabled', 'disabled');
      });

    } else {
      $('.checkbox1').each(function() { //loop through each checkbox
        $('#InventoryMasterError').removeAttr('disabled', 'disabled');
      });
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="selecctall" name="selecctall" value="All" />
<input type="checkbox" name="data[InventoryMaster][error]" label="" value="error" id="InventoryMasterError" />
<input type="checkbox" name="checkid[]" class="checkbox1" value="1" id="InventoryMasterId" />
<input type="checkbox" name="checkid[]" class="checkbox1" value="2" id="InventoryMasterId" />

Answer 6

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

function enable_cb() {
  if (this.checked) {
    jQuery("input.group1").removeAttr("disabled");
  } else {
    jQuery("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>