jQuery. Wie deaktivieren Sie alle Kontrollkästchen mit einer Ausnahme (die überprüft wurde)

Question

Ich habe html Artikel, 4 Beispiel:

<div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
</div> 

Und jetzt, ich will nächste: Wenn ich auf jedem Kontrollkästchen klicken - das Kontrollkästchen sollte und andere werden überprüft Kontrollkästchen sollten deaktiviert sein. Wie kann ich es tun?

Answer 1

Sie können die Schaltfläche radio verwenden und sie nach Namensattributen gruppieren. Wenn Sie es mit checkboxes zu tun haben, dann können Sie es auf diese Weise tun,

Live Demo

$('.foo').click(function(){  
     $('.foo').attr('checked', false); 
     $(this).attr('checked', true);   
}); 

Für dynamisch generierten HTML-Code Sie on müssen, dass Sie die Veranstaltung mit statischen Eltern delegieren können, können Sie Verwenden Sie das Dokument mit Ihnen nicht statische Eltern kennen.

$(document).on('click','.foo', function(){  
     $('.foo').attr('checked', false); 
     $(this).attr('checked', true);   
}); 

Dokument könnte durch statische Eltern ersetzt werden, wenn es bekannt ist. z.B. wenn div dynamisch erzeugt hat, enthalten id parentdiv dann können Sie

`$('#parentdiv').on('click','.foo', function(){` 

bearbeiten

Verwendung haben prop statt attr Objekte checked, selected oder disabled gemäß Dokumentation.

Ab jQuery 1.6 gibt die Methode .attr() undefined für die Attribute zurück, die nicht festgelegt wurden. Verwenden Sie die Methode .prop(), um DOM-Eigenschaften wie den aktivierten, ausgewählten oder deaktivierten Status von Formularelementen abzurufen und zu ändern.

Answer 2

Hier ist ein bisschen ich zufällig auf zu arbeiten:

.siblings("input[type='checkbox']").attr("checked", true); 

alle Kontrollkästchen mit Ausnahme des einen wählen wird, die geklickt wurde.

$("input[type=checkbox]").on("click", function() { 
 

 
    if ($(this).val() == "none") { 
 
    
 
    $(this).siblings("input[type=checkbox]").attr('checked', false); 
 
    
 
    } else { 
 
    
 
    $(this).siblings("input[value=none]").attr('checked', false); 
 

 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 

 
    <input type="checkbox" id="worker-soft-eaglesoft" checked><label for="worker-soft-eaglesoft">&nbsp;Eaglesoft</label><br> 
 
    <input type="checkbox" id="worker-soft-dentrix"><label for="worker-soft-dentrix">&nbsp;Dentrix</label><br> 
 
    <input type="checkbox" id="worker-soft-softDent"><label for="worker-soft-softDent">&nbsp;Soft-Dent</label><br> 
 
    <input type="checkbox" id="worker-soft-denticon"><label for="worker-soft-denticon">&nbsp;Denticon</label><br> 
 
    <input type="checkbox" id="worker-soft-other"><label for="worker-soft-other">&nbsp;Other</label><br> 
 

 
    <input type="checkbox" id="worker-soft-none" value="none"> 
 
    <label for="worker-soft-none">&nbsp;No Software Experience - Paper Records Only</label><br> 
 
</div>