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/…

— ওয়াল্ট স্টোনবার্নার

এটি সরাসরি প্রশ্নের সাথে সম্পর্কিত নয়, তবে আইইতে চেকবক্সটি ফোকাস না দেওয়া পর্যন্ত পরিবর্তন ইভেন্টটি চালিত হবে না। আমি সাধারণত $(this).changeপ্রথম চেকবক্সের ক্লিক ইভেন্টে কল করি ।

— এমক্রামলে

আপনি .prop()পরিবর্তে ব্যবহার করতে পারেন .attr()।

— রেজা ওলিয়ায়েই

আমার .prop () নিয়ে সমস্যা ছিল, এটি প্রাথমিক সেটে কাজ করেছিল, তবে আমি যদি পিছনে টোগল করি তবে দ্বিতীয়বার এটি চেকবক্সটি "অক্ষম" করতে ব্যর্থ হয়েছিল। আমি অ্যাটর () এর সাথে আটকেছি।

— প্রোভেগা

@ প্রোভেগা এটি আপনার সমস্যার ব্যাখ্যা দিতে পারে।

— অ্যান্ড্রু

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

যাঁরা একটি এস্প ব্যবহার করছেন: চেকবক্স আমার মতো, এটি ব্রাউজারে একটি স্প্যানের মধ্যে একটি ইনপুট হিসাবে রেন্ডার করে। সুতরাং আমার ক্ষেত্রে, আমাকে Qu ('। চেকবক্সক্লাসনাম ইনপুট') হিসাবে jQuery দিয়ে এটি অ্যাক্সেস করতে হয়েছিল prop এই উত্তরের জন্য!

— ডিবিস

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>