Jquery cómo contar marcó e inhabilitó las casillas de verificación

Intento desactivar todas las casillas no marcadas cuando hay 5 casillas de verificación marcadas.Jquery cómo contar marcó e inhabilitó las casillas de verificación

Mi código no funciona aquí está: http://jsfiddle.net/mtYtW/18/

Mi Jquery:

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

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

Mi 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>

Fuente

2011-08-05 Rails beginner

favor, introduzca su código a la pregunta así. Para el futuro si jsfiddle desaparece alguna vez, la pregunta seguirá siendo relevante. –

El violín js que proporcionó simplemente pasa el código de carga y luego nunca vuelve a verificar. Intente obtener todas las casillas de verificación y agregar un atributo .click y volver a evaluar el recuento de verificación. –

countcheckhed está mal escrito. – Narnian

El siguiente debe hacer el truco para sus necesidades:

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

(Genérico) A continuación se desactivará todas las casillas sin marcar:

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

Generic Disable Example

Fuente

2011-08-05 18:26:30

¿Cómo habilitar todas las casillas de verificación cuando una de las 6 casillas de verificación está desmarcada? –

La instrucción else maneja eso :) Puede verificar el primer ejemplo –

¡Muchas gracias! Ejemplo perfecto. – Drako

supongo que desea desactivar el resto de las casillas de verificación una vez que el el conteo de casillas marcadas obtiene más de 5. Si es así, intente esto:

$('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 {} 
});

Ejemplo de trabajo: http://jsfiddle.net/mtYtW/30/

Si desea desactivar las casillas de verificación de la carga de la página y comprobar si hay más de 5 casillas de verificación que se comprueban a continuación, intente esto:

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

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

Fuente

2011-08-05 18:32:56 Chandu

La parte "> 5" permitirá seleccionar 6 casillas de verificación. – brezanac

@holodoc: Perdí la parte 'cuando hay 5 casillas de verificación' de la pregunta y cumplí la condición utilizada en el Código original de OP. Se corrigió – Chandu

LOL es divertido ver a la gente cómo todos cambiaron sus soluciones después de esta observación: D – brezanac

Tome un vistazo a este

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

Fuente

2011-08-05 18:33:33 ShankarSangoli

Su código era estrecha, con algunas cuestiones importantes.

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

El mayor, que tenían su código sólo la ejecución de proceso de carga. Hay que realizar en cualquier momento una de las casillas de verificación se comprueba, es esta parte:

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

que tenías un nombre de variable mal escrita countcheck no existía, era countchecked.

Usted usaba find cuando realmente deseaba filter. Buscar buscará en los descendientes de los elementos en su conjunto, quería filtrarlos.

Tuviste > 5 cuando dijiste que querías deshabilitar AT 5. Entonces debería ser >=.

Está deshabilitando TODAS las casillas de verificación, no solo sin marcar como dijo, agregué .not(":checked").

Y, por último, que pensé que probablemente desee volver a activarlos si uno estaba sin control, por lo que añade:

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

Fuente

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

Tenga en cuenta que es prop jQuery 1.6 exclusivo. En caso de jQuery < 1.6 use attr.

Fuente

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

Ejemplo de trabajo: http://jsfiddle.net/mtYtW/48/

NOTA: Este código permitirá a las casillas de verificación si se anula la selección de uno de los cinco!

Fuente

2011-08-05 18:36:00

No, no lo hará. Permitirá seleccionar 6 casillas de verificación. – 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{ 

    } 
});

Ejemplo de trabajo: http://jsfiddle.net/Re5uy/6/

Fuente

2011-08-05 18:36:20 RobB

Jquery cómo contar marcó e inhabilitó las casillas de verificación

Respuesta

Cuestiones relacionadas