March 23, 2012

How to disable one radio input from radio group?

Question by IT ppl

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

Answer by Jibi Abraham

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');       
});​

Answer by Starx

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 fucntion 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

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!