How to disable one radio input from radio group?

Question

How can i disable the one radio input from the radio group ?

<input type="radio" name="radiogrp" value="op1" checked="checked">Option1
<input type="radio" name="radiogrp" value="op2"> Option2
<input type="radio" name="radiogrp" value="op3" > Option3
<input type="radio" name="radiogrp" value="op4"> Option4

My question is i want to disable option1 after clicking on any other button

For example:

when i select option2, than option1 should be disabled

Look at the [updated answer](http://stackoverflow.com/a/9834948/601179) I added a cool way for it. — gdoron, Mar 23 '12 at 08:10

Jibi Abraham · Accepted Answer · 2012-03-23T06:30:10.860

6

Check this Fiddle I have just added

Let me know if this is not what you intended

As requested - posted fiddle answer

$('.rd').click(function(){
    $('.rd[value="op1"]').attr('disabled', 'disabled');       
});

edited Mar 23 '12 at 06:30

answered Mar 23 '12 at 06:19

Jibi Abraham

4,636
2
31
60

it gives some error while checking as answer, something like "You can accept an answer in 1 minute" ... :( – IT ppl Mar 23 '12 at 06:28
You should post the answer here, not in jsfiddle – gdoron Mar 23 '12 at 06:29
And you select the radio buttons twice instead of cache the selector result. – gdoron Mar 23 '12 at 06:29
@gdoron - I had to do the second select on the value, I can't cache the whole thing. Pointless – Jibi Abraham Mar 23 '12 at 06:31
Wrong... see [my answer](http://stackoverflow.com/a/9834948/601179). You can test it with `jsPerf` you will notice the difference. – gdoron Mar 23 '12 at 06:33

score 1 · Answer 2 · answered Aug 22 '13 at 15:51

I am using jquery mobile with fancy dynamic styling, and I found that after performing the disable, I needed to explicitly issue an refresh using the checkboxradio("refresh") method call so that the styling would reflect the change. You can chain the method call, though, so it might look like this:

$('.rd').click(function(){
  $('.rd[value="op1"]').attr('disabled', 'disabled').checkboxradio("refresh");
});

http://view.jquerymobile.com/1.3.2/dist/demos/faq/updating-the-value-of-enhanced-form-elements-does-not-work.html

While I appreciate gdoron's deeper, more technical, more efficient, more comprehensive approach, I believe that sometimes (just sometimes) the easier reading and shorter coding of Jibi Abraham's approach is warranted, especially in an otherwise lightweight situation.

I realize this isn't a distinct answer, but I don't have enough reputation to do a comment yet.

Rafay · Answer 3 · 2012-03-23T06:54:33.733

1

$(":radio").change(function(){

    $(":radio[name='radiogrp']").slice(0,1).attr("disabled","disabled");
});

DEMO

edited Mar 23 '12 at 06:54

answered Mar 23 '12 at 06:16

Rafay

30,950
5
68
101

@enigma : i want to disable only option 1, where as option2,option3,option4 must be enabled – IT ppl Mar 23 '12 at 06:18
@enigma : it still dosen't work, it disables the lastly selected option – IT ppl Mar 23 '12 at 06:22
yet again updated but there are other correct answers already been posted – Rafay Mar 23 '12 at 06:25
yupppp, but thnks for ur time :) – IT ppl Mar 23 '12 at 06:26
You should cache the selector result. and could just use `.eq(0)` to get the first element. – gdoron Mar 23 '12 at 06:35
yup caching is related to performance i focused on just getting it right, eq and slice seems to run equally fast http://jsperf.com/already – Rafay Mar 23 '12 at 06:41
it shows varying results though but here is the screenshot where it shows both are equally significant http://imgur.com/QALDd – Rafay Mar 23 '12 at 06:48

gdoron · Answer 4 · 2012-03-23T08:09:37.110

1

var radios = $('input[type="radio"][name="radiogrp"]');
radios.change(function() {
    if (this.value != "op1") {
        radios.filter('[value="op1"]').prop('disabled', true);
    }
});

I cached the radio buttons, so I don't need to Query the DOM twice.

DEMO

Since, after the change, there is no way back, this is more fun way:

var radios = $('input[type="radio"][name="radiogrp"]');
var first = $('input[type="radio"][name="radiogrp"][value="op1"]');
radios.not(first).change(function() {
    alert('changed'); // getting called only once.
    first.prop('disabled', true);
    radios.unbind('change');
});

LIVE DEMO

edited Mar 23 '12 at 08:09

answered Mar 23 '12 at 06:21

gdoron

147,333
58
291
367

@gdoron - true, I agree. This is a better method, and you've also used prop - which I assume is the new way. How is it different from attr? – Jibi Abraham Mar 23 '12 at 06:36
@ITppl. there was missing `{` try it again – gdoron Mar 23 '12 at 06:38
@gdoron : Now it's 5n, thnks ... :) – IT ppl Mar 23 '12 at 06:39
1

@JibiAbraham. Read [this](http://stackoverflow.com/questions/5874652/prop-vs-attr) – gdoron Mar 23 '12 at 06:39
@gdoron tx. I shall look into it – Jibi Abraham Mar 23 '12 at 06:44
@ITppl. look at the update, thanks for the question! it was fun. – gdoron Mar 23 '12 at 08:10

score 1 · Answer 5 · edited Nov 25 '13 at 16:00

1

Its very easy, use jQuery's attribute selector. Here is an example of disabling the radio button with value op3

$('input[value="op3"]').attr('disabled', 'disabled');

Demo

Here is your solution

var radios =  $('input[name=radiogrp]'); //Cache all the radio button
radios.click(function() { 
//Attach a function to the click event of all radio button

    if(this.value!='op1') { //Check if currently click button has value of op1
        radios.filter('[value="op1"]').prop('disabled', true); //if not disable the first
    }
});

Demo

edited Nov 25 '13 at 16:00

BenMorel

34,448
50
182
322

answered Mar 23 '12 at 06:21

Starx

77,474
47
185
261

**1.** Use `prop` instead of `attr`. **2.** `$(this).val()` => `this.value` **3.** Cache the selector result. – gdoron Mar 23 '12 at 06:30
@gdoron, One thing is `this.value` faster than `$(this).val()`? – Starx Mar 23 '12 at 06:38
Yes it is, it doesn't need to create jQuery object. and do a lot of things just to get the value. – gdoron Mar 23 '12 at 06:40
You still select twice the DOM – gdoron Mar 23 '12 at 06:41
I miss use the `prop` function. – gdoron Mar 23 '12 at 07:22

score 1 · Answer 6 · answered Mar 23 '12 at 06:22

1

Try

$('input[value="op2"]').click(function(e)
     {
         $('input[value="op1"]').attr('disabled', 'disabled');
     });

http://jsfiddle.net/3CdZU/

answered Mar 23 '12 at 06:22

Milan Halada

1,943
18
28

How to disable one radio input from radio group?

6 Answers6

As requested - posted fiddle answer

DEMO

Demo

Demo