Como desmarcar a caixa de seleção usando a biblioteca uniforme do jQuery

144

Estou com um problema ao desmarcar a checkbox. Dê uma olhada no meu jsFiddle , onde estou tentando:

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

Eu uso uniforme para estilizar o checkboxe simplesmente não funciona para marcar / desmarcar o checkbox.

Alguma ideia?

Voto a favor
fonte
tanto no Google Chrome e Firefox ele não funciona para mim
Upvote

Respostas:

108

Analisando os documentos, eles têm um $.uniform.updaterecurso para atualizar um elemento "uniformizado".

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

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

$("body").on("click", "#check1", function () {
    var two = $("#check2").attr("checked", this.checked);
    $.uniform.update(two);
});
user113716
fonte
5
@mkoryak: Funciona bem 1.4.4, mas os links para os arquivos js e css foram quebrados. Aqui está um violino atualizado. Se você quer dizer que haverá problemas especificamente 1.6, provavelmente isso é verdade, pois o jQuery mudou e reverteu o comportamento de .attr(). Usando 1.6ou superior, você realmente deveria estar usando .prop().
user113716
Não vejo absolutamente nenhuma diferença entre o jsFiddle atualizado e o original (até a marcação incorreta da caixa de seleção 2), exceto que a versão atualizada funciona para mim e o original não!?!?
precisa saber é o seguinte
Aliás, todos esses formulários uniformes desenhados por pixels parecem muito pouco atraentes na Retina.
encarnada
não funcionou para mim também jsFiddle não funciona ou é confuso
Matthy
367

Uma solução mais simples é fazer isso em vez 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

Isso não acionará nenhuma ação de clique definida.

Você também pode usar:

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

Isso irá ativar / desativar a seleção da caixa de seleção, mas também acionará qualquer ação de clique que você definiu. Por isso tem cuidado.

EDIT : jQuery 1.6+ usa prop()não attr()para caixas de seleção valor marcado

Mr.Hunt
fonte
2
Isso deixa o atributo verificado como está no jQuery 1.7.1 para mim. Funciona, mas não faz o que você pensa que deveria.
2rs2ts
24
$("#chkBox").attr('checked', false); 

Isso funcionou para mim, desmarcará a caixa de seleção. Da mesma maneira que podemos usar

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

para marcar a caixa de seleção.

user1683014
fonte
4
Eu acho que é melhor usar a função .prop () em vez de .attr (). Caso contrário não vai funcionar sempre como esperado ...
Simon Steinberger
13

Se você estiver usando o uniforme 1.5 , use este truque simples para adicionar ou remover o atributo check.
Basta adicionar value = "check" no campo de entrada da caixa de seleção.
Adicione este código em uniform.js> function doCheckbox(elem){>.click(function(){

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

se você não deseja adicionar valor = "marcar" na sua caixa de entrada, porque em alguns casos você adiciona duas caixas de seleção, use isso

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

Se você estiver usando o uniforme 2.0 , use este truque simples para adicionar ou remover o atributo de verificação
nessa classUpdateChecked($tag, $el, options) {alteração de função

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

Para

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

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

Isso funcionou para mim.

Parijat
fonte
Muito obrigado. Posso confirmar que esta é a solução mais simples.
Rudolph Opperman
2

Apenas faça o seguinte:

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

você precisa ligar $.uniform.update()se atualizar o elemento usando javascript, conforme mencionado na documentação.

Adeel
fonte
1

Primeiro de tudo, checkedpode ter um valor de checkedou uma sequência vazia.

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

$('#check1').live('click', function() {
    $('#check2').attr('checked', 'checked').uniform();
});
nyuszika7h
fonte
Não há nada errado em passar um valor booleano como o valor de checked.
user113716
Mas não estamos escrevendo marcação HTML. Estamos definindo uma propriedade no HTMLInputElement. Dê uma olhada na checkedpropriedade.
user113716
Não importa ... eu realmente não entendo por que isso é inválido também ...
nyuszika7h 15/02/11
a passagem de um valor booleano é suportada apenas na versão 1.6+, antes era necessário definir o atributo verificado como 'verificado' ou removê-lo.
Mkoryak
1

Em alguns casos, você pode usar isso:

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

Para alternar, você pode usar se mais com a função

Larionov Nikita
fonte
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
fonte
0

A outra maneira de fazer é,

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

isso faz com que uniforme marque a caixa de seleção e atualize suas máscaras

Hailwood
fonte
-1

caixa de seleção que age como rádio btn

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

RaDo
fonte