Jquery selecciona todo si no está deshabilitado

3 minutos de lectura

Estoy usando el siguiente script para seleccionar todas las casillas de verificación con una clase determinada.

$(document).ready(function(){ // 1
    // 2
    $(':checkbox.selectall').on('click', function(){
        // 3
        $(':checkbox[class="+ $(this).data("checkbox-name') + ']').prop("checked", $(this).prop("checked"));
        $(':checkbox[class="+ $(this).data("checkbox-name') + ']').trigger("change");
    });

});

Sin embargo, tengo un problema ya que la casilla de verificación de/seleccionar todo puede deshabilitar/seleccionar las casillas de verificación que están deshabilitadas.

probé esto

$(document).ready(function(){ // 1
    // 2
    $(':checkbox.selectall').on('click', function(){
        // 3
        $(':checkbox[class="+ $(this).data("checkbox-name') + !$(:disabled) + ']').prop("checked", $(this).prop("checked"));
        $(':checkbox[class="+ $(this).data("checkbox-name') + !$(:disabled) + ']').trigger("change");
    });

});

Pero no funciona. He hecho un jsfiddle para mostrar el problema. http://jsfiddle.net/e67Fv/

Hm… intento interesante, pero no puede usar un objeto jQuery dentro de un selector, ya que el selector es solo una cadena simple.

El selector para excluir los elementos deshabilitados sería :not(:disabled)por lo que su código debería ser:

$(document).ready(function(){
  $(':checkbox.selectall').on('click', function(){
    $(':checkbox[class="+ $(this).data("checkbox-name') + ']:not(:disabled)').prop("checked", $(this).prop("checked"));
    $(':checkbox[class="+ $(this).data("checkbox-name') + ']:not(:disabled)').trigger("change");
  });
});

Tenga en cuenta que puede encadenar llamadas, por lo que no tiene que seleccionar los elementos dos veces:

$(document).ready(function(){
  $(':checkbox.selectall').on('click', function(){
    $(':checkbox[class="+ $(this).data("checkbox-name') + ']:not(:disabled)').prop("checked", $(this).prop("checked")).trigger("change");
  });
});

Utilice una combinación de los .not() función y :disabled selector para excluirlos.

$(':checkbox[class="+ $(this).data("checkbox-name') + ']').not(':disabled').prop("checked", $(this).prop("checked"));
$(':checkbox[class="+ $(this).data("checkbox-name') + ']').not(':disabled').trigger("change");

.not() también existe como un selector como :not() y podría ser utilizado de la siguiente manera:

 $(':checkbox[class="+ $(this).data("checkbox-name') + ']:not(:disabled)').prop("checked", $(this).prop("checked"));
 $(':checkbox[class="+ $(this).data("checkbox-name') + ']:not(:disabled)').trigger("change");

avatar de usuario
sergio cruz

Esto es lo que suelo hacer:

$(function(){
    $(".selectall").live('change', function(){
        if($(this).is(":checked"))
        {
            $("input:checkbox:not(:disabled)." + $(this).data('checkbox-name')).prop("checked", "true");
        }
        else
        {
            $("input:checkbox:not(:disabled)." + $(this).data('checkbox-name')).prop("checked", "false");
        }
    });
});

Espero que ayude 🙂

  • Hm… ¿Leíste la pregunta? Esto solo hace una parte de lo que hizo el código original. No hay nada allí para manejar las casillas de verificación deshabilitadas.

    – Guffa

    12 de julio de 2012 a las 17:23


  • Lo siento, olvidé incluir eso en el código, acabo de editar mi respuesta agregando: no (: deshabilitado) …

    – sergiocruz

    12 de julio de 2012 a las 17:33

avatar de usuario
Runa FS

Esto no hace lo mismo que su código original. Solo desencadenaría el cambio para aquellos que no cambiaron. Supuse que deseaba activar el cambio para todos los que una vez que cambió

$(':checkbox.selectall').on('click', function(){
        $(':checkbox .'+ $(this).data('checkbox-name')).not(':disabled').prop("checked", $(this).prop("checked")).trigger("change");
    });

jQuery admite :enabled ya que v1.0

$('input:checkbox:enabled')

es lo mismo que

$('input:checkbox:not(:disabled)')

y ayuda a evitar la :not() selector.

¿Ha sido útil esta solución?