JQuery - wyłącza zduplikowane pola wyboru po zaznaczeniu - jquery

Mam listę pól wyboru pogrupowanych w sekcje. Niektóre z tych pól wyboru mogą pojawić się w więcej niż jednej sekcji. Chciałbym powstrzymać użytkownika przed wybraniem tego samego pola wyboru w więcej niż jednej sekcji, wyłączając wszystkie pola wyboru, które są takie same, gdy użytkownik zaznacza pole wyboru. Jednak zaznaczone pole wyboru nie może być wyłączone, aby można było odznaczyć to pole wyboru (musi to również ponownie włączyć wszystkie wyłączone pola wyboru, aby mogli wybrać go w innej sekcji, jeśli chcą)

Czy ktoś zna najlepszy sposób na zrobienie tego w JQuery?

przykładowy kod:

<h3>Section 1</h3>
<ul>
<li>
<label for="section1_method_1">
<input name="method_1" value="43" id="section1_method_1" type="checkbox">Option 1
</label>
</li>
<li>
<label for="section1_method_2">
<input name="method_2" value="2" id="section1_method_2" type="checkbox">Option 2
</label>
</li>
<li>
<label for="section1_method_5">
<input name="method_5" value="6" id="section1_method_5" type="checkbox">Option 5
</label>
</li>
</ul>

<h3>Section 2</h3>
<ul>
<li>
<label for="section2_method_0">
<input name="method_0" value="5" id="section2_method_0" type="checkbox">Option 0
</label>
</li>
<li>
<label for="section2_method_1">
<input name="method_1" value="143" id="section2_method_1" type="checkbox">Option 1
</label>
</li>
</ul>

jak widać opcja 1 pojawia się zarówno w sekcji 1, jak i 2. Każda z nich ma inny identyfikator, ale nazwa jest taka sama.

Wolałbym to zrobić za pomocą pól wyboru jakoużytkownik może nie zdawać sobie sprawy z tego, że wybrał tę samą opcję w innej sekcji, a jeśli pole wyboru było wyłączone, wiedziałoby, że już je wybrało i gdyby chcieli zmienić swój wybór, musieliby go fizycznie odznaczyć.

Odpowiedzi:

6 dla odpowiedzi № 1

Nie wyłączyłbym pól wyboru, po prostu je zwiążę, więc zmieniają się tak:

$("input[type=checkbox]").change(function(){
name = $(this).attr("name");
checked = $(this).attr("checked");
// this will set all the checkboxes with the same name to the same status
$("input[type=checkbox][name="+name+"]").attr("checked",checked);
});​

przykład pracy

---

Aktualizacja: Aby wyłączyć inne pola wyboru:

$("input[type=checkbox]").change(function(){
name = $(this).attr("name");
id = $(this).attr("id");
checked = $(this).attr("checked");
// disable all checkboxes except itself
$("input[type=checkbox][name="+name+"]:not(#"+id+")")
.attr("disabled",checked);
});​

przykład pracy

---

Aktualizacja 2: Aby wyszarzyć również odpowiednie etykiety:

$("input[type=checkbox]").change(function(){
name = $(this).attr("name");
id = $(this).attr("id");
checked = $(this).attr("checked");
$("input[type=checkbox][name="+name+"]:not(#"+id+")")
.attr("disabled",checked)
.each(function(){
lid = $(this).attr("id"); // the id of the current disabled box
if (checked) {
$("label[for="+lid+"]").addClass("disabled");
} else {
$("label[for="+lid+"]").removeClass("disabled");
}
});
});​

i trochę css:

.disabled {
color: #888;
}

przykład pracy

---