Jak odznaczyć pole wyboru za pomocą biblioteki jQuery Uniform

144

Mam problem z odznaczeniem pliku checkbox. Spójrz na moje jsFiddle , gdzie próbuję:

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

Używam jednolite dla stylizacji checkboxi to po prostu nie działa, aby zaznaczyć / odznaczyćcheckbox .

Jakieś pomysły?

jquery checkbox Głosuj za
źródło

zarówno w Google Chrome, jak i Firefoxie nie działa dla mnie

Upvote

108

Patrząc na swoje dokumenty, mają $.uniform.updatefunkcję odświeżania „umundurowanego” elementu.

Przykład: http://jsfiddle.net/r87NH/4/

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

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

user113716
źródło

5

@mkoryak: Działa dobrze w programie 1.4.4, ale linki do plików js i css są uszkodzone. Oto zaktualizowane skrzypce. Jeśli masz na myśli, że będzie miał problemy w szczególności 1.6, to prawdopodobnie jest to prawda, ponieważ jQuery zmieniło, a następnie przywróciło zachowanie .attr(). Używając 1.6lub wyższej, naprawdę powinieneś używać .prop().

user113716,

Nie widzę absolutnie żadnej różnicy między zaktualizowanym jsFiddle a oryginałem (aż do błędnego oznakowania pola wyboru 2), z wyjątkiem tego, że zaktualizowana wersja działa dla mnie, a oryginał nie!?!?

iPadDeveloper2011,

Swoją drogą, wszystkie te jednolite formy rysowane pikselami wyglądają bardzo nieseksownie na siatkówce.

wcielenie

nie działa dla mnie również jsfiddle nie działa lub jest mylące

matthy

367

Prostszym rozwiązaniem jest zrobienie tego zamiast używania uniformu:

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

Nie spowoduje to żadnej zdefiniowanej akcji kliknięcia.

Możesz także użyć:

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

Spowoduje to przełączenie zaznaczenia / odznaczenia pola wyboru, ale spowoduje to również uruchomienie dowolnej zdefiniowanej akcji kliknięcia. Więc uważaj.

EDYCJA : jQuery 1.6+ używa wartości zaznaczonych prop()nie attr()dla pól wyboru

Panie Hunt
źródło

2

To pozostawia zaznaczony atrybut bez zmian w jQuery 1.7.1. Działa, ale nie robi tego, co Twoim zdaniem powinno.

2rs2ts

24

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

To zadziałało dla mnie, spowoduje to odznaczenie pola wyboru. W ten sam sposób możemy użyć

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

aby zaznaczyć pole wyboru.

user1683014
źródło

4

Myślę, że lepiej jest użyć funkcji .prop () zamiast .attr (). W przeciwnym razie nie zawsze będzie działać zgodnie z oczekiwaniami ...

Simon Steinberger,

13

Jeśli używasz uniforma 1.5, użyj tej prostej sztuczki, aby dodać lub usunąć atrybut sprawdzenia.
Po prostu dodaj wartość = "sprawdź" w polu wejściowym pola wyboru.
Dodaj ten kod w uniform.js> function doCheckbox(elem){>.click(function(){

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

jeśli nie chcesz dodawać value = "check" w polu wprowadzania danych, ponieważ w niektórych przypadkach dodajesz dwa pola wyboru, więc użyj tego

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

Jeśli używasz uniformu 2.0, użyj tej prostej sztuczki, aby dodać lub usunąć atrybut sprawdzenia
w tej classUpdateChecked($tag, $el, options) {zmianie funkcji

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

Do

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

}

Sohail Ahmed
źródło

7

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

To zadziałało dla mnie.

Parijat
źródło

Dziękuję Ci bardzo. Mogę potwierdzić, że jest to najprostsze rozwiązanie.

Rudolph Opperman

2

Po prostu zrób to:

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

moledet
źródło

1

musisz zadzwonić, $.uniform.update()jeśli aktualizujesz element za pomocą javascript, jak wspomniano w dokumentacji.

Adeel
źródło

1

Przede wszystkim checkedmoże mieć wartość checkedlub pusty ciąg.

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

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

nyuszika7h
źródło

Nie ma nic złego w przekazywaniu wartości logicznej jako wartości checked.

user113716

Ale nie piszemy znaczników HTML. Ustawiamy właściwość na HTMLInputElement. Zapraszamy do obejrzenia checkednieruchomości.

user113716

Nieważne… Nie bardzo rozumiem, dlaczego jest nieważne…

nyuszika7h

przekazywanie wartości logicznej jest obsługiwane tylko w wersji 1.6+, wcześniej trzeba było ustawić atrybut zaznaczony na „zaznaczony” lub go usunąć.

mkoryak

1

W niektórych przypadkach możesz tego użyć:

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

Do przełączania możesz użyć if else z funkcją

Larionov Nikita
źródło

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

Rozwiń fragment

P.Mondal
źródło

0

Innym sposobem jest:

posługiwać się $('#check2').click();

powoduje to, że uniform zaznacza pole wyboru i aktualizuje swoje maski

Hailwood
źródło

-1

pole wyboru, które działa jak radio btn

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

RaDo
źródło

Jak odznaczyć pole wyboru za pomocą biblioteki jQuery Uniform

Odpowiedzi: