CODEWITHSUNDEEP
javascriptjquery
Jishnu A P
Jishnu A P

Reputation: 14390

Disabling the radio button with jQuery

I have a group of radio buttons with same name and some of which may be disabled. I don't want the user to check or uncheck the disabled radio buttons . Obviously this means that if the checked radio button in the group is disabled the user cannot change the selection.

i wrote the following code for this.

$("#container").delegate(":radio","click",function(e){
    alert($(":radio").filter(":checked").val());
    //this always shows up the value of the radio button clicked
    if($(":radio").filter(":checked").is(":disabled"))
    {
        e.preventDefault();
    }

});

I suppose the problem is that as soon as the radio button is clicked the selection changes and the event handler is executed and .preventDefault() reverts the selection.

I hope it's clear

Here is a jsFiddle

Upvotes: 2

Views: 2811

Answers (3)

mplungjan
mplungjan

Reputation: 178403

The two other answers are so far not handling radio groups.

I made that work after a battle with an issue with the is()

EITHER I had a syntax error in is(":checked") OR jQuery does not return true for a disabled, but checked radio - if the click on the other radio temporarily removes the checked javascript boolean from the other radio without actually removing the checked attribute, that would explain it.

WORKING EXAMPLE

Short version: cannot handle more than one disabled

$("#container :radio").click(function(e){
    var disR = $("#container input[name="+$(this).attr("name")+"]")
     .filter(":disabled");
    if (disR.length > 0 && disR.attr("checked")==="checked") {
          e.preventDefault();
          return false
    }
});

Longer version: - now it is getting more and more interesting to wrap each radio group and use the other suggestion

http://jsfiddle.net/mplungjan/HQs6s/

$("#container :radio").click(function(e){
    var radioGroup = $("#container input[name="+$(this).attr("name")+"]");
    var disR = radioGroup.filter(":disabled"); // cannot use :checked
    if (disR.length == 0) return true;
    for (var i=0,n=disR.length, chk;i<n;i++) {
        chk = disR[i].getAttribute("checked");
        if (chk && chk==="checked") { // html element
          e.preventDefault();
          return false;
      }
    }
});

Upvotes: 2

Salman Arshad
Salman Arshad

Reputation: 272396

Inside the click event: $(":checked") points to the radio that was clicked, not the one that checked. preventDefault() determines whether the clicked radio will stay clicked or not. So you might want to do something like this:

function attachMyNoClick() {
    if ($("#container :radio").filter(":checked").is(":disabled")) {
        $("#container :radio").bind("click.MyNoClick", false);
    }
    else {
        $("#container :radio").unbind("click.MyNoClick");
    }
}    
$(document).ready(function() {
    attachMyNoClick
});

If there is jQuery code that changes the disabled state of radio buttons, you should hook the above function inside that function. You must first unbind() the click event then bind() the click event if necessary.

Demo here

Note: disabled radio buttons will not submit even if they are checked.

Upvotes: 1

Niklas
Niklas

Reputation: 30012

You could do something like this:

$('#container :radio:checked:disabled').parent().delegate(":radio","click",function(e){
     e.preventDefault();
});

example: http://jsfiddle.net/dTBVa/50/

Upvotes: 2

Related Questions