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?

Voto a favor
fuente
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);
});
usuario113716
fuente
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

Mr.Hunt
fuente
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.

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

}
Sohail Ahmed
fuente
7
$('#check1').prop('checked', true).uniform(); 
$('#check1').prop('checked', false).uniform(); 

Esto funcionó para mí.

Parijat
fuente
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');
moledet
fuente
1

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

Adeel
fuente
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();
});
nyuszika7h
fuente
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

Larionov Nikita
fuente
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/>

P.Mondal
fuente
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

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

RaDo
fuente