He creado campos de casilla de verificación de tipo de entrada como a continuación:
<input type="checkbox" class="" value="1" name="foo" /> <input type="checkbox" class="" value="1" name="foo" /> <input type="checkbox" class="" value="1" name="foo" />Ahora quiero que la casilla de verificación funcione como un botón de opción como una selección única. entonces usar jquery funciona bien:
$("input:checkbox").click(function(){ var group = "input:checkbox[name='"+$(this).prop("name")+"']"; $(group).prop("checked",false); $(this).prop("checked",true); });Pero ahora, si quiero revertir esa casilla de verificación, funciona como casilla de verificación usando jquery, entonces no funciona.
Esto es posible, pero realmente no deberías hacerlo. Conducirá a una experiencia de usuario deficiente, porque un usuario generalmente asumirá que un conjunto de casillas de verificación significa que puede seleccionar más de una si lo desea. Si ven botones de radio, saben que tienen que hacer una sola elección. Si encuentran una casilla de verificación establecida donde no pueden seleccionar más de una, puede ser frustrante e incluso pueden pensar que hay un error en su aplicación.
Además, ¿por qué necesitaría "volver a habilitar" algo? Una vez que se responda la pregunta, en su lugar, generará una nueva pregunta. No reutilizaría el mismo marcado para una nueva pregunta... eso no tiene ningún sentido.
En su lugar, al representar cada pregunta, haga que su código (ya sea del lado del cliente o del lado del servidor, según su arquitectura de representación) genere casillas de verificación o botones de radio, según corresponda, dependiendo de si su base de datos indica que la pregunta requiere respuestas múltiples o únicas. . Esto debería ser más simple que las soluciones que manipulan el comportamiento de la casilla de verificación y conducirá a una mejor interfaz de usuario.
Debe usar botones de radio, pero si debe usar la casilla de verificación:
$("input:checkbox").change(function(){ $("input:checkbox").not(this).prop("checked",false); });Puede desvincular el controlador de clics
$("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>