CODEWITHSUNDEEP
jqueryasp.net-mvc-3
PushRa
PushRa

Reputation: 31

Enabling/Disabling of Text Box on click of different Radio Buttons using jQuery

I have 4 radio buttons in a group, say 1,2,3,4 and along with radiobutton1 there are two more input text boxes. When I select radiobutton1 then those text boxes are enabled but on selecting radio button 2,3,4 -- text boxes are disabled. After selecting radio button 2,3,4 and having text boxes disabled, if I select back radiobutton1 then text boxes should be enabled againg. And by default (on loading page first time), radio button 1 is selected along with text boxes enabled

This is my HTML code written in MVC3 using Razor view engine

@Html.RadioButtonFor(m => m.Search, "rb1", new { Checked = "true", id = "1" })radio 1 
<td>@Html.TextBoxFor(m => m.textbox1, new { style = "width:11%" })
<td>@Html.TextBoxFor(m => m.textbox2, new { style = "width:11%" })
@Html.RadioButtonFor(m => m.Search, "rb2", new { id = "2" })radio 2
@Html.RadioButtonFor(m => m.Search, "rb3", new { id = "3" })radio 3
@Html.RadioButtonFor(m => m.Search, "rb4", new { id = "4" })radio 4

I need to do this using jquery in minimum line of codes. Any suggestions?

Upvotes: 1

Views: 8691

Answers (3)

Stphane
Stphane

Reputation: 3456

HTML

<div id="radioContainer">
    <input type="radio" name="r" id="r1" />
    <input type="text" id="t1" disabled="disabled" />
    <input type="text" id="t2"  disabled="disabled"  /><br />
    <input type="radio" name="r" id="r2" />
    <input type="radio" name="r" id="r3" />
    <input type="radio" name="r" id="r4" />
<div>

js

// only one handler is attached to DOM
$("#radioContainer").click(function(e){
    var $t = $(e.target), $inputs = $(this).find('input');
    if( $t.is('input[name="radios"]') )
        $inputs.filter('[type="text"]').get(0).disabled = ($t.attr('id') == 'r1' ? false:true);
    });

Upvotes: 0

billyonecan
billyonecan

Reputation: 20250

jQuery

$('input[type="radio"]').click(function() {
    if($(this).index() == 0) {
        $('input[type="text"]').removeAttr('disabled');
    } else {
        $('input[type="text"]').prop('disabled', 'disabled');
    }
});

HTML

<input type="radio" name="group" />
<input type="radio" name="group" />
<input type="radio" name="group" />
<input type="radio" name="group" />

<input type="text" disabled="disabled" />
<input type="text" disabled="disabled" />

Upvotes: 1

Priya
Priya

Reputation: 1425

     $("#r1").click(function () {
                $(".myText").attr("disabled", false);
            });

            $(".disableText").click(function () {
                $(".myText").attr("disabled", true);
            });

HTML:

<input type="radio" name="r" id="r1"  />
<input type="radio" name="r" id="r2"  class="disableText" />
<input type="radio" name="r" id="r3"  class="disableText" />
<input type="radio" name="r" id="r4"  class="disableText" />
<input type="text" id="t1" class="myText" disabled="disabled" />
<input type="text" id="t2"  class="myText" disabled="disabled"  />

Upvotes: 3

Related Questions