jQuery - kotak centang aktifkan / nonaktifkan

234

Saya memiliki banyak kotak centang seperti ini. Jika kotak centang "Periksa Saya" dicentang, semua 3 kotak centang lainnya harus diaktifkan, kalau tidak mereka harus dinonaktifkan. Bagaimana saya bisa melakukan ini menggunakan 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>
jquery Jake
sumber

Jawaban:

413

Ubah sedikit markup Anda:

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

Anda dapat melakukan ini menggunakan penyeleksi atribut tanpa memperkenalkan ID dan kelas tetapi lebih lambat dan (imho) lebih sulit untuk dibaca.

cletus
sumber
3
Untuk bagian penonaktifan, coba url ini: jquery-howto.blogspot.com/2008/12/…
Walt Stoneburner
3
Ini tidak terkait langsung dengan pertanyaan, tetapi di IE acara perubahan tidak akan menyala sampai kotak centang kehilangan fokus. Saya biasanya memanggil $(this).changeacara klik pada kotak centang pertama.
mcrumley
10
Anda bisa menggunakan .prop()bukan .attr().
Reza Owliaei
5
Saya punya masalah dengan .prop (), ini berfungsi pada set awal, tetapi jika saya beralih bolak-balik, kedua kalinya gagal "menonaktifkan" kotak centang. Saya terjebak dengan attr ().
ProVega
3
@ProVega Ini mungkin menjelaskan masalah Anda.
Andrew
100

Ini adalah solusi terbaru.

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

Berikut adalah detail penggunaan untuk .attr()dan .prop().

jQuery 1.6+

Gunakan .prop()fungsi baru :

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

jQuery 1.5 dan di bawah

The .prop()Fungsi ini tidak tersedia, sehingga Anda perlu menggunakan .attr().

Untuk menonaktifkan kotak centang (dengan mengatur nilai atribut yang dinonaktifkan) lakukan

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

dan untuk mengaktifkan (dengan menghapus atribut seluruhnya) lakukan

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

Versi jQuery apa pun

Jika Anda bekerja dengan hanya satu elemen, itu akan selalu tercepat untuk digunakan DOMElement.disabled = true. Manfaat menggunakan .prop()dan .attr()fungsinya adalah mereka akan beroperasi pada semua elemen yang cocok.

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

ref: Pengaturan "dicentang" untuk kotak centang dengan jQuery?

roydukkey
sumber
2
Bagi mereka yang menggunakan asp: Kotak centang seperti saya, itu merender di browser sebagai input dalam rentang. Jadi dalam kasus saya, saya harus mengaksesnya dengan jQuery sebagai $ ('. CheckboxClassName input'). Prop ('dinonaktifkan', salah) ... dan mencoba mengubah 'diaktifkan' juga tidak bekerja untuk saya :) Terima kasih untuk jawaban ini!
deebs
10 
<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);
});

Dengan fungsionalitas tambahan untuk memastikan centang semua kotak centang dicentang / dicentang jika semua kotak centang dicentang:

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

Berikut contoh lain menggunakan JQuery 1.10.2 

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

$(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" />
Luaskan cuplikan

pangeranpn
sumber
0 

$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>
Luaskan cuplikan

Guvanch Hojamov
sumber