CODEWITHSUNDEEP
javascriptjqueryhtml
fatherazrael
fatherazrael

Reputation: 5977

Prevent user from clicking radio again and without disabling it

<input type="radio" id="Svar0" name="Svar" value="Yes"> 
<input type="radio" id="Svar1" name="Svar" value="No"> 
<input type="radio" id="Svar2" name="Svar" value="MayBe">

User can choose only once.

As per requirement, if the user has selected a radio, he can not select another one. Means that if the user has answered YES (clicked on YES), then he can not change the answer to NO or MayBe.

Workarounds:

  1. If I disable the radio after single click then it is not submitted to the server.
  2. There is no option for readonly.

  3. I tried onchange handler returning false, but it makes the user answer disappearing.

    <script> 
$('input[type = "radio"]').change(function () {
    this.checked = false;
});
</script>

  4. I am thinking of weird options like transparent div before radio buttons.

I do not want to prefer hidden fields as I have above 60 questions and I find it difficult to manage them.

Please help me any code in Jquery or Javascript.

If the user selects one answer in radio, then the page should not allow him to select another answer and so the first selected answer should be the one that gets submitted.

Upvotes: 3

Views: 1520

Answers (5)

adricadar
adricadar

Reputation: 10209

Quick solution: You can disable the others radio buttons and the selected value remains enabled.

var $Svars = $('input[name="Svar"]');
$Svars.change(function () { 
     $Svars.not(this).prop("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="Svar0" name="Svar" value="Yes" /> Yes
<input type="radio" id="Svar1" name="Svar" value="No" /> No
<input type="radio" id="Svar2" name="Svar" value="MayBe" /> Maybe

Solution 2: Another solution will be to add a class or a data attribute to exclude the others, like below.

var $Svars = $('input[name="Svar"]');
$Svars.change(function () { 
    var $this = $(this);
    if($this.val() == $this.data('selected') || $this.data('selected') == undefined) {
        $Svars.data('selected', $this.val());
    } else {
        $Svars.val([$this.data('selected')]);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="Svar0" name="Svar" value="Yes" /> Yes
<input type="radio" id="Svar1" name="Svar" value="No" /> No
<input type="radio" id="Svar2" name="Svar" value="MayBe" /> Maybe

Upvotes: 0

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

Another simple option (disable all, except selection, on selection of any). This allows the selected value to be posted back:

$(':radio').change(function(){
    $(':radio').not(this).prop("disabled", true);
});

JSFiddle: http://jsfiddle.net/9n8v4heo/

Update (delay before disable):

It does not appear to be a good user experience to allow radio selection then freeze it immediately, as mistakes do happen.

The following example will allow a 2 second delay after any selection, before making them disabled, so you can keep clicking but after two seconds you cannot select again:

var tme;
$(':radio').change(function(){
    var t = this;
    clearTimeout(tme);
    tme = setTimeout(function(){
        $(':radio').not(t).prop("disabled", true);
    }, 2000);
});

JSFiddle: http://jsfiddle.net/9n8v4heo/1/

Upvotes: 2

Balachandran
Balachandran

Reputation: 9637

try

$("[type=radio][name=Svar]").change(function () {

    if (!$("[type=radio][name=Svar]").filter("[clicked]").length) {
        $(this).attr("clicked", "true")
    } else {
        $(this).prop("checked", !this.checked);
        $("[type=radio][name=Svar]").filter("[clicked]").prop("checked", true)
    }


});

DEMO

use preventDefault() with click event as @JotaBe said 

$("[type=radio][name=Svar]").click(function (e) {
    if (!$("[type=radio][name=Svar]").filter("[clicked]").length) {
        $(this).attr("clicked", "true")
    } else {
        e.preventDefault(); 
    }

});

DEMO

Upvotes: 1

JotaBe
JotaBe

Reputation: 39014

You can attach an event handler that disables the default action for the click to all the radios, and do whatever you need to do instead ofteh default action. Tod so so, attach a handler that simply includes a call to: event.preventDefault(), and your own code.

See jquery docs for event.preventDefault()

$(document).ready(function() {
    var allowChoose = true;
    $('input').click(function(e) {
        if (allowChoose) {
            allowChoose = false;
        } else {
            e.preventDefault();
        }
    });
});

As you can see, you can use a flag like 'allowChoose' to allow the default action on the first click, and then change the flag and avoid the default action (checking the radio) on the next calls.

See the fiddle here.

Upvotes: 0

Cristik
Cristik

Reputation: 32786

You can disable the other buttons when one gets selected, this way the selected one will get sent when the form is submitted.

jQuery("input[name=Svar]").change(function() {
    jQuery("input[name=Svar]").prop("disabled", "disabled");
    jQuery(this).prop("disabled",false);
});

Upvotes: 0

Related Questions