Cómo desmarcar la casilla de verificación usando la biblioteca jQuery Uniform


144

Tengo un problema al desmarcar a checkbox. Echa un vistazo a mi jsFiddle , donde estoy intentando:

   $("#check2").attr("checked", true);

Utilizo uniforme para diseñar el checkboxy simplemente no funciona para marcar / desmarcar el checkbox.

¿Algunas ideas?


tanto en google chrome como en firefox no funciona para mí
Voto a favor

Respuestas:


108

Mirando sus documentos, tienen una $.uniform.updatefunción para actualizar un elemento "uniformado".

Ejemplo: http://jsfiddle.net/r87NH/4/

$("input:checkbox").uniform();

$("body").on("click", "#check1", function () {
    var two = $("#check2").attr("checked", this.checked);
    $.uniform.update(two);
});

55
@mkoryak: funciona bien 1.4.4, pero los enlaces a los archivos js y css estaban rotos. Aquí hay un violín actualizado. Si quiere decir que tendrá problemas específicamente 1.6, entonces eso probablemente sea cierto ya que jQuery cambió y luego revirtió el comportamiento de .attr(). Usando 1.6o superior, realmente deberías estar usando .prop().
user113716

No puedo ver absolutamente ninguna diferencia entre el jsFiddle actualizado y el original (hasta el etiquetado incorrecto de la casilla de verificación 2), excepto que la versión actualizada funciona para mí y el original no.
iPadDeveloper2011

Por cierto, todas estas formas uniformes dibujadas en píxeles se ven muy poco atractivas en Retina.
Encarnado el

no funcionó para mí también jsfiddle no funciona o es confuso
matthy

367

Una solución más simple es hacer esto en lugar de usar uniforme:

$('#check1').prop('checked', true); // will check the checkbox with id check1
$('#check1').prop('checked', false); // will uncheck the checkbox with id check1

Esto no activará ninguna acción de clic definida.

También puedes usar:

$('#check1').click(); // 

Esto activará o desactivará la casilla de verificación, pero también activará cualquier acción de clic que haya definido. Así que ten cuidado.

EDITAR : jQuery 1.6+ utiliza prop()no attr()para casillas de verificación valor verificado


2
Esto deja el atributo marcado tal como está en jQuery 1.7.1 para mí. Funciona pero no hace lo que crees que debería.
2rs2ts

24
$("#chkBox").attr('checked', false); 

Esto funcionó para mí, esto desmarcará la casilla de verificación. Del mismo modo podemos usar

$("#chkBox").attr('checked', true); 

para marcar la casilla de verificación.


44
Creo que es mejor usar la función .prop () en lugar de .attr (). De lo contrario, no funcionará siempre como se esperaba ...
Simon Steinberger

13

Si está utilizando el uniforme 1.5 , utilice este simple truco para agregar o eliminar el atributo de verificación.
Simplemente agregue value = "check" en el campo de entrada de su casilla de verificación.
Añadir este código en uniform.js> function doCheckbox(elem){>.click(function(){

if ( $(elem+':checked').val() == 'check' ) {
    $(elem).attr('checked','checked');           
}
else {
    $(elem).removeAttr('checked');
}   

si no desea agregar value = "check" en su cuadro de entrada porque en algunos casos agrega dos casillas de verificación, así que use esto

if ($(elem).is(':checked')) {
 $(elem).attr('checked','checked');
}    
else
{    
 $(elem).removeAttr('checked');
}

Si está utilizando uniforme 2.0 , utilice este simple truco para agregar o eliminar el atributo de verificación
en este classUpdateChecked($tag, $el, options) {cambio de función

if ($el.prop) {
    // jQuery 1.6+
    $el.prop(c, isChecked);
}

A

if ($el.prop) {
    // jQuery 1.6+
    $el.prop(c, isChecked);
    if (isChecked) {
        $el.attr(c, c);
    } else {
        $el.removeAttr(c);
    }

}

7
$('#check1').prop('checked', true).uniform(); 
$('#check1').prop('checked', false).uniform(); 

Esto funcionó para mí.


Muchas gracias. Puedo confirmar que esta es la solución más simple.
Rudolph Opperman

2

Solo haz esto:

$('#checkbox').prop('checked',true).uniform('refresh');

1

debe llamar $.uniform.update()si actualiza el elemento utilizando javascript como se menciona en la documentación.


1

En primer lugar, checkedpuede tener un valor de checkedo una cadena vacía.

$("input:checkbox").uniform();

$('#check1').live('click', function() {
    $('#check2').attr('checked', 'checked').uniform();
});

No hay nada de malo en pasar un valor booleano como valor de checked.
user113716

Pero no estamos escribiendo marcado HTML. Estamos estableciendo una propiedad en el HTMLInputElement. Echa un vistazo a la checkedpropiedad.
user113716

No importa ... tampoco entiendo por qué es inválido ...
nyuszika7h

pasar un valor booleano solo se admite en 1.6+, antes de eso tenía que establecer el atributo marcado como 'verificado' o eliminarlo.
mkoryak

1

En algunos casos puedes usar esto:

$('.myInput').get(0).checked = true

Para alternar, puede usar if else con function


1

 $("#checkall").change(function () {
            var checked = $(this).is(':checked');
            if (checked) {
                $(".custom-checkbox").each(function () {
                    $(this).prop("checked", true).uniform();
                });
            } else {
                $(".custom-checkbox").each(function () {
                    $(this).prop("checked", false).uniform();
                });
            }
        });

        // Changing state of CheckAll custom-checkbox
        $(".custom-checkbox").click(function () {
            if ($(".custom-checkbox").length == $(".custom-checkbox:checked").length) {
                $("#chk-all").prop("checked", true).uniform();
            } else {
                $("#chk-all").removeAttr("checked").uniform();
            }
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id='checkall' /> Select All<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="PHP"> PHP<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="AngularJS"> AngularJS<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="Python"> Python<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="Java"> Java<br/>


0

La otra forma de hacerlo es,

utilizar $('#check2').click();

esto hace que uniforme marque la casilla de verificación y actualice sus máscaras


-1

casilla de verificación que actúa como radio btn

$(".checkgroup").live('change',function() { var previous=this.checked; $(".checkgroup).attr("checked", false); $(this).attr("checked", previous); });

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.