Utworzyłem pola wyboru typu input jak poniżej:
<input type="checkbox" class="" value="1" name="foo" />
<input type="checkbox" class="" value="1" name="foo" />
<input type="checkbox" class="" value="1" name="foo" />
Teraz chcę, aby pole wyboru działało jako przycisk radiowy, jak pojedynczy wybór. więc używanie jquery działa dobrze:
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).prop("name")+"']";
$(group).prop("checked",false);
$(this).prop("checked",true);
});
Ale teraz, jeśli chcę odwrócić to pole wyboru działa jako pole wyboru za pomocą jquery, to nie działa.
4 odpowiedzi
Jest to możliwe, ale naprawdę nie powinieneś tego robić. Doprowadzi to do złego doświadczenia użytkownika, ponieważ użytkownik zazwyczaj zakłada, że zestaw pól wyboru oznacza, że może wybrać więcej niż jedno, jeśli chce. Jeśli widzą przyciski opcji, wiedzą, że muszą dokonać jednego wyboru. Jeśli znajdą zestaw pól wyboru, w których nie mogą wybrać więcej niż jednego, może to być frustrujące, a nawet mogą pomyśleć, że w Twojej aplikacji jest błąd.
Poza tym, po co miałbyś „ponownie włączać” cokolwiek? Po uzyskaniu odpowiedzi na pytanie wyrenderujesz zamiast tego nowe pytanie. Nie użyłbyś ponownie tych samych znaczników dla nowego pytania... to nie ma sensu.
Zamiast tego, podczas renderowania każdego pytania, spraw, aby Twój kod (po stronie klienta lub po stronie serwera, zgodnie z Twoją architekturą renderowania) generował odpowiednio albo pola wyboru lub przyciski radiowe, w zależności od tego, czy Twoja baza danych wskazuje, że pytanie wymaga wielu lub pojedynczych odpowiedzi. Powinno to być zarówno prostsze niż rozwiązania, które manipulują zachowaniem pola wyboru, jak i prowadzić do lepszego interfejsu użytkownika.
Wypróbuj z Dodaj klasę multipal
<input type="checkbox" class="multipal" value="1" name="foo" />
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).prop("name")+"']";
if($(this).hasClass('multipal')){
$(this).prop("checked",true);
}
else{
$(group).prop("checked",false);
$(this).prop("checked",true);
}
});
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).prop("name")+"']";
if($(this).hasClass('multipal')){
$(this).prop("checked");
}
else{
$(group).prop("checked",false);
$(this).prop("checked",true);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="" value="1" name="foo" />
<input type="checkbox" class="" value="1" name="foo" />
<input type="checkbox" class="" value="1" name="foo" />
<h2>Multipal<h2>
<input type="checkbox" class="multipal" value="1" name="foo" />
<input type="checkbox" class="multipal" value="1" name="foo" />
<input type="checkbox" class="multipal" value="1" name="foo" />.not() jQuery jest o wiele prostsze, zobacz moją odpowiedź
Powinieneś używać przycisków radiowych, ale jeśli musisz użyć pola wyboru:
$("input:checkbox").change(function(){
$("input:checkbox").not(this).prop("checked",false);
});
Możesz odpiąć obsługę kliknięcia
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).prop("name")+"']";
$(group).prop("checked",false);
$(this).prop("checked",true);
});
function disableRadio ( ) {
$("input:checkbox").unbind();
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" class="" value="1" name="foo" />
<input type="checkbox" class="" value="1" name="foo" />
<input type="checkbox" class="" value="1" name="foo" />
<button type="button" onclick="disableRadio()">Disable Radio</button>
</body>
</html>