jQuery checkbox work as radio button but reverse back like checkbox-CodePudding

I have created input-type checkbox fields like below:

<input type="checkbox"  value="1" name="foo" />
<input type="checkbox"  value="1" name="foo" />
<input type="checkbox"  value="1" name="foo" />

Now i want checkbox work as radio button like single select. so using jquery is working fine:

$("input:checkbox").click(function(){
    var group = "input:checkbox[name='" $(this).prop("name") "']";
    $(group).prop("checked",false);
    $(this).prop("checked",true);
});

But now if i want to reverse that checkbox work as checkbox using jquery then not working.

CodePudding user response：

This is possible, but but you really shouldn't do it. It will lead to a poor user experience, because a user will generally assume that a set of checkboxes means they can select more than one if they wish to. If they see radio buttons, they know they have to make a single choice. If they find a checkbox set where they can't select more than one, it might be frustrating and they may even think there is a bug in your application.

Also, why would you need to "re-enable" anything? Once the question is answered, you would render a new question instead. You wouldn't re-use the same markup for a new question...that doesn't make any sense.

Instead, when rendering each question, make your code (either client-side or server-side, as per your rendering architecture) generate either checkboxes or radio buttons, as appropriate, depending on whether your database indicates that the question requires multiple or single answers. This should be both simpler than solutions which manipulate the checkbox behaviour, and will lead to a better UI.

CodePudding user response：

You should use radio buttons, but if you must use checkbox:

$("input:checkbox").change(function(){
  $("input:checkbox").not(this).prop("checked",false);
});

CodePudding user response：

You can unbind the click handler

    $("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"  value="1" name="foo" />
    <input type="checkbox"  value="1" name="foo" />
    <input type="checkbox"  value="1" name="foo" />   
    <button type="button" onclick="disableRadio()">Disable Radio</button> 
</body>
</html>

CodePudding user response：

Try with Add Class multipal

<input type="checkbox"  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"  value="1" name="foo" />
<input type="checkbox"  value="1" name="foo" />
<input type="checkbox"  value="1" name="foo" />

<h2>Multipal<h2>
<input type="checkbox"  value="1" name="foo" />
<input type="checkbox"  value="1" name="foo" />
<input type="checkbox"  value="1" name="foo" />