jQuery: casella di controllo abilita / disabilita


234

Ho un sacco di caselle di controllo come questa. Se la casella "Check Me" è selezionata, tutte le altre 3 caselle dovrebbero essere abilitate, altrimenti dovrebbero essere disabilitate. Come posso fare questo usando 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>

Risposte:


413

Modifica leggermente il markup:

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

Puoi farlo usando i selettori di attributo senza introdurre l'ID e le classi ma è più lento e (imho) più difficile da leggere.


3
Per la parte disabilitante, prova questo url: jquery-howto.blogspot.com/2008/12/…
Walt Stoneburner

3
Questo non è direttamente correlato alla domanda, ma in IE l'evento change non si attiverà fino a quando la casella di controllo non si attiva. Di solito richiamo $(this).changel'evento click della prima casella di controllo.
mcrumley,

10
puoi usare al .prop()posto di .attr().
Reza Owliaei,

5
Ho avuto problemi con .prop (), ha funzionato sul set iniziale, ma se avessi alternato avanti e indietro, la seconda volta non riusciva a "disabilitare" la casella di controllo. Mi sono bloccato con attr ().
ProVega,


100

Questa è la soluzione più aggiornata.

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

Ecco i dettagli di utilizzo per .attr()e .prop().

jQuery 1.6+

Usa la nuova .prop()funzione:

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

jQuery 1.5 e precedenti

La .prop()funzione non è disponibile, quindi è necessario utilizzare .attr().

Per disabilitare la casella di controllo (impostando il valore dell'attributo disabilitato) fare

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

e per l'abilitazione (rimuovendo completamente l'attributo) do

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

Qualsiasi versione di jQuery

Se lavori con un solo elemento, sarà sempre più veloce da usare DOMElement.disabled = true. Il vantaggio di usare le funzioni .prop()e .attr()è che funzioneranno su tutti gli elementi corrispondenti.

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

ref: Impostazione "selezionata" per una casella di controllo con jQuery?


2
Per coloro che stanno usando un asp: CheckBox come me, viene visualizzato nel browser come input in un intervallo. Quindi nel mio caso, ho dovuto accedervi con jQuery come $ ('. CheckboxClassName input'). Prop ('disabled', false) ... e cercare di cambiare 'enabled' non ha funzionato neanche per me :) Grazie per questa risposta!
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);
});

Con funzionalità aggiuntive per garantire che tutte le caselle di controllo siano selezionate / deselezionate se tutte le singole caselle sono selezionate:

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

1

Ecco un altro esempio usando JQuery 1.10.2

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

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


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>

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.