Jquery come contare spunta e disattiva le caselle di controllo

Sto provando a disabilitare tutte le caselle di controllo non selezionate quando ci sono 5 caselle di controllo spuntate.Jquery come contare spunta e disattiva le caselle di controllo

Il mio codice non funziona qui è: http://jsfiddle.net/mtYtW/18/

mio Jquery:

var countchecked = $('table input[type="checkbox"]').find(":checked").length 

    if(countcheckhed > 5) { 
     $("table input:checkbox").attr("disabled", true); 
    } else {}

mio HTML:

<table cellspacing="0" cellpadding="0" width="770px;"> 
    <tbody><tr style="border: 1px solid green; height: 40px; font-size: 14px;"> 
    <th>Feature 1</th> 
    <th>Feature 2</th> 
    <th>Feuture 3</th> 
    </tr> 

    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
</tbody></table>

fonte

2011-08-05 Rails beginner

Si prega di aggiungere il codice alla domanda pure. Per il futuro, se jsfiddle scomparirà, la domanda sarà comunque pertinente. –

Il je fiddle che hai fornito passa semplicemente il codice onload e quindi non controlla mai più. Prova a ottenere tutte le caselle di controllo e aggiungere un attributo .click e rivalutare il conteggio degli assegni. –

countchecked è errato. – Narnian

Il seguente dovrebbe fare il trucco per le vostre esigenze:

$("table input[type=checkbox]").click(function(){ 
var countchecked = $("table input[type=checkbox]:checked").length; 

if(countchecked >= 5) 
{ 
    $('table input[type=checkbox]').not(':checked').attr("disabled",true); 
} 
else 
{ 
    $('table input[type=checkbox]').not(':checked').attr("disabled",false); 
}

});

Example for your needs

(generico) Di seguito vi disabilitare tutte le caselle di controllo non controllato:

$('input[type=checkbox]').not(':checked').attr("disabled","disabled");

Generic Disable Example

fonte

2011-08-05 18:26:30

Come abilitare tutte le caselle di controllo quando una delle 6 caselle di controllo è deselezionata? –

La dichiarazione else gestisce quella :) Puoi controllare il primo esempio –

Grazie mille! Esempio perfetto – Drako

Credo che si desidera disattivare il resto delle caselle di controllo una volta che il il conteggio delle caselle di controllo ottiene più di 5. Se questo è il caso, prova questo:

$('table input[type="checkbox"]').click(function(){ 
    var countchecked = $('table input[type="checkbox"]').filter(":checked").length; 

    if(countchecked > 4) { 
     $("table input:checkbox").not(":checked").attr("disabled", true); 
    } else {} 
});

esempio di lavoro: http://jsfiddle.net/mtYtW/30/

Se si desidera disattivare le caselle di controllo sul caricamento della pagina e verificare se ci sono più di 5 caselle di controllo che vengono controllati quindi provare questo:

$(function(){ 
    var countchecked = $('table input[type="checkbox"]').filter(":checked").length; 

    if(countchecked > 4) { 
     $("table input:checkbox").not(":checked").attr("disabled", true); 
    } else {} 
});

fonte

2011-08-05 18:32:56 Chandu

La parte "> 5" consentirà di selezionare 6 caselle di controllo. – brezanac

@holodoc: Mancava la parte della domanda "quando ci sono 5 caselle di controllo selezionate" e passava secondo la condizione utilizzata dal codice originale dell'OP. Risolto il problema – Chandu

LOL è divertente vedere le persone come hanno cambiato le loro soluzioni dopo questa osservazione: D – brezanac

Date un'occhiata a questo

http://jsfiddle.net/mtYtW/33/

fonte

2011-08-05 18:33:33 ShankarSangoli

il codice era vicino, con alcuni grandi temi.

http://jsfiddle.net/mtYtW/37/

$(function() { 
    $('table input[type="checkbox"]').change(function() { 
     var countchecked = $('table input[type="checkbox"]').filter(":checked").length 

     if (countchecked >= 5) { 
      $("table input:checkbox").not(":checked").attr("disabled", true); 
     }else{ 
      $("table input:checkbox").attr("disabled", false); 
     } 
    }); 
});

Il più grande, hai avuto il tuo codice unico esecuzione onload. È necessario eseguire in qualsiasi momento una delle caselle di controllo è selezionata, cioè questa parte:

$('table input[type="checkbox"]').change(function() {

Hai avuto un nome di variabile errato countcheck non esisteva, era countchecked.

Si stava utilizzando find quando si voleva veramente filter. Trova cercherà nei discendenti degli elementi nel tuo set, hai voluto filtrarli.

Hai avuto > 5 quando hai dichiarato di voler disabilitare AT 5. Quindi dovrebbe essere >=.

Si stavano disattivando TUTTE le caselle di controllo, non solo quelle deselezionate come hai detto, ho aggiunto .not(":checked").

E, infine, ho pensato probabilmente si vorrebbe riattivare loro, se uno era senza controllo, così ho aggiunto:

}else{ 
    $("table input:checkbox").attr("disabled", false); 
}

fonte

2011-08-05 18:34:28

$(':checkbox').bind('click', function(){ 
    if($(':checkbox:checked').length >= 5) { 
     $(':checkbox').not(':checked').prop('disabled', true); 
    } else { 
     $(':checkbox').not(':checked').prop('disabled', false); 
    } 
});

noti che prop è jQuery 1.6 esclusiva. In caso di jQuery < 1.6 utilizzare attr.

fonte

2011-08-05 18:35:59 brezanac

$('table input[type="checkbox"]').click(function(){ 
    var countcheck = $('table input[type="checkbox"]:checked').length; 
    if(countcheck > 4) { 
     $("table input:checkbox:not(:checked)").attr("disabled", true); 
    }else 
    { 
     $("table input:checkbox").attr("disabled", false); 
    } 
});

di lavoro Esempio: http://jsfiddle.net/mtYtW/48/

NOTA: Questo codice consentirà le caselle di controllo se si deseleziona uno dei cinque!

fonte

2011-08-05 18:36:00

No, non è così. Permetterà di selezionare 6 caselle di controllo. – brezanac

$("table input[type=checkbox]").click(function(){ 
    var countchecked = $("table input[type=checkbox]:checked").length; 
    if(countchecked >= 5) { 
     $("table input:checkbox").attr("disabled", true); 
    }else{ 

    } 
});

esempio di lavoro: http://jsfiddle.net/Re5uy/6/

fonte

2011-08-05 18:36:20 RobB

Jquery come contare spunta e disattiva le caselle di controllo

risposta

Problemi correlati