CODEWITHSUNDEEP
javascriptasp.netradio-button
Ghassan
Ghassan

Reputation: 351

radio button checked causes enabling of a textbox in asp.net

i have a 2 radio buttons that belong to the same group. asp net radio buttons not regular input type radio buttons.

if the first radio button is selected, the textbox beside it will be enabled. else it will be disabled. i have seen that for input type radio buttons using JQUERY. so far i wasnt able to adapt that code to my asp.net controls.

i need it 2 be javascript and not in code behind.

any advice?

thanks!

here is my code

    <table>
<tr>
   <td>
                                <asp:RadioButton ID="SiteLicenseRBN" runat="server" Checked="True"   
                                    GroupName="users" resourcekey="SiteLicenseRBN" 
                                    Text="Site License" TextAlign="Left" Font-Bold="True" />
                            </td>

                            <td>
                                <asp:RadioButton ID="ConcUsersRBN" runat="server" GroupName="users"
                                    Text="Conc. Users" TextAlign="Left" 
                                    resourcekey="ConcUsersRBN" Font-Bold="True" 
                                   />
                                <asp:TextBox ID="nuserstbx" runat="server" Enabled="False"
                                    Width="71px"></asp:TextBox>
                            </td>
</tr>
</table>

if the 2nd radio button is selected(Conc. Users), then nuserstbx must be enabled, else it should be disabled.

Upvotes: 0

Views: 4235

Answers (2)

graphicdivine
graphicdivine

Reputation: 11211

Something like this:

<form name="myform">
 <input type="radio" name="radios" onclick="rtest(this)" value="R1"/>
 <input type="text" disabled="disabled" name="t1"/>

 <input type="radio" name="radios" onclick="rtest(this)" value="R2"/>
 <input type="text" disabled="disabled" name="t2"/>

 <input type="radio" name="radios" onclick="rtest(this)" value="R3"/>
 <input type="text" disabled="disabled" name="t3"/>
</form>

<script>
 function rtest(r){
    var allinputs = document.myform.elements;
    for(var i=0; i < allinputs.length; i += 1 ){
        if ( allinputs[i].type === "text" ){
           if ( allinputs[i].previousElementSibling.checked ){
               allinputs[i].removeAttribute("disabled");
           }else{
               allinputs[i].disabled = "disabled";
           }
       }
    }
 }
</script>

http://jsfiddle.net/HjLeH/

Upvotes: 1

Bobby
Bobby

Reputation: 1604

This a quick basic example. All textboxes are disabled. But when you click on the first radio button it will make the texbox beside it active.

HTML

 <span id="radiobutt">
  <input type="radio" name="rad1" value="1" />
  <input type="text" id="textbox1" disabled="disabled"/>
    <br/>
  <input type="radio" name="rad1" value="2" />
    <input type="text" id="textbox2" disabled="disabled"/>
    <br/>
  <input type="radio" name="rad1" value="3" />
    <input type="text" id="textbox3" disabled="disabled"/>
</span>

Javascript

    $$("#radiobutt input[type=radio]").each(function(i){
    $(this).click(function () {
        if(i==0) {
                $("#textbox1").removeAttr("disabled");
                $("#checkbox1").removeAttr("disabled");
        }
        else {
                $("#textbox1").attr("disabled", "disabled");
                $("#checkbox1").attr("disabled", "disabled");
        }
      });
  });

Or you can view the working example here

http://jsfiddle.net/fqueT/1/

Upvotes: 0

Related Questions