ASP.NET/JAVASCRIPT disabling dropdown list from RadioButton value (client side)

Question

Currently I have three RadioButtons:

<asp:RadioButton ID="rbShowAll" runat="server" CssClass="radio-inline" GroupName="grpReadStatus" onchange="disableDDL()"/>
<asp:RadioButton ID="rbIssuedTo" runat="server" CssClass="radio-inline" GroupName="grpReadStatus" onchange="disableDDL()"/>
<asp:RadioButton ID="rbReceivedFrom" runat="server" CssClass="radio-inline" GroupName="grpReadStatus" onchange="disableDDL()"/>

And two DropDownLists:

<asp:DropDownList ID="ddlBuyer" runat="server" class="form-control" />
<asp:DropDownList ID="ddlSeller" runat="server" class="form-control" />

How can I, without touching server side, disable the dropdownList according to which RadioButton is selected in Javascript function?

I have tried:

function disableDDL() {
    if (document.getElementById("rbShowAll").checked) {
        document.getElementById("ddlBuyer").disabled = true;
        document.getElementById("ddlSeller").disabled = true;
    }
    else if (documne.getElementById("rbIssuedTo").checked) {
        document.getElementById("ddlSeller").disabled = true;
    }
    else if (document.getElementById("rbReceivedFrom").checked) {
        document.getElementById("ddlButer").disabled = true;
    }
}

But it's not working. Can someone please advise on this? Help would be much appreciated. Thanks

Answer 1

I have created a working code snippet for you, There were plenty of typos and that's why it wasn't working, I have corrected them all :) have a look.

 function disableDDL() { document.getElementById("ddlBuyer").disabled = false; document.getElementById("ddlSeller").disabled = false; if (document.getElementById("rbShowAll").checked) { //alert('rbShowAll'); document.getElementById("ddlBuyer").disabled = true; document.getElementById("ddlSeller").disabled = true; } else if (document.getElementById("rbIssuedTo").checked) { //alert('rbIssuedTo'); document.getElementById("ddlSeller").disabled = true; } else if (document.getElementById("rbReceivedFrom").checked) { //alert('rbReceivedFrom'); document.getElementById("ddlBuyer").disabled = true; } //else { //alert('Else'); //} } 

 <input type="radio" id="rbShowAll" class="radio-inline" name="grpReadStatus" onchange="javascript:disableDDL()">Show all <input type="radio" id="rbIssuedTo" class="radio-inline" name="grpReadStatus" onchange="javascript:disableDDL()">Issued to <input type="radio" id="rbReceivedFrom" class="radio-inline" name="grpReadStatus" onchange="javascript:disableDDL()">Recieved from <select id="ddlBuyer"> <option>Select Buyer</option> <option>Buyer 1</option> </select> <select id="ddlSeller"> <option>Select Seller</option> <option>Seller 1</option> </select> 

Answer 2

asp:RadioButton is rendered as a span element with the radio inside so the event onchage you put will be assigned to the span element and won't work. Instead use directly:

 <input type="radio" id="rbShowAll" runat="server" name="grpReadStatus" class="radio-inline" onchange="disableDDL()" /> 

Test it here: https://jsfiddle.net/pacmhjjL/2/

 function disableDDL() { if (document.getElementById("rbShowAll").checked) { document.getElementById("ddlBuyer").disabled = true; document.getElementById("ddlSeller").disabled = true; } else if (document.getElementById("rbIssuedTo").checked) { document.getElementById("ddlSeller").disabled = true; } else if (document.getElementById("rbReceivedFrom").checked) { document.getElementById("ddlBuyer").disabled = true; } } 

 <input type="radio" id="rbShowAll" class="radio-inline" name="grpReadStatus" onchange="disableDDL()" /> <input type="radio" id="rbIssuedTo" class="radio-inline" name="grpReadStatus" onchange="disableDDL()" /> <input type="radio" id="rbReceivedFrom" class="radio-inline" name="grpReadStatus" onchange="disableDDL()" /> <select id="ddlBuyer" class="form-control"> <option>ddlBuyer</option> </select> <select id="ddlSeller" class="form-control"> <option>ddlSeller</option> </select> 

I've corrected your js functin since it contains typos.

Answer 3

Modify your html accordingly..

<input type="radio" id="rbShowAll" class="radio-inline" name="grpReadStatus" onchange="javascript:disableDDL()">Show all
<input type="radio" id="rbIssuedTo" class="radio-inline" name="grpReadStatus" onchange="javascript:disableDDL()">Issued to
<input type="radio" id="rbReceivedFrom" class="radio-inline" name="grpReadStatus" onchange="javascript:disableDDL()">Recieved from

<select id="ddlBuyer">
  <option>Select Buyer</option>
  <option>Buyer 1</option>
</select>

<select id="ddlSeller">
  <option>Select Seller</option>
  <option>Seller 1</option>
</select>

Modify your javascript function accordingly..

    function disableDDL() {
        if (document.getElementById("rbShowAll").checked) {
            document.getElementById("ddlBuyer").disabled = true;
            document.getElementById("ddlSeller").disabled = true;
        }
        else if (document.getElementById("rbIssuedTo").checked) {
            document.getElementById("ddlSeller").disabled = true;
            document.getElementById("ddlBuyer").disabled = false;
     }
else if (document.getElementById("rbReceivedFrom").checked) {
            document.getElementById("ddlSeller").disabled = false;
            document.getElementById("ddlBuyer").disabled = true;
}