disable the dropdownbox when i click the radiobutton

Question

Hiiii... How can i disable the dropdown box when i click the radiobutton .i have three dropdownbox and three radiobutton.when i click the one radiobutton the all dropdown box can be disable and i click the another two radiobutton the dropdown can be enable.How can it will be work.. tks.....

Suraj Kumar · Answer

As you said you are working in MVC. It can be done using Jquery as shown below. //To disable all dropdown $( '#radioButton1' ).click( function () { if ($( this ).is( ':checked' )) { $( "#dropdown1" ).prop( "disabled" , true ); $( "#dropdown2" ).prop( "disabled" , true ); $( "#dropdown3" ).prop( "disabled" , true ); } }); //To re-enable all dropdown $( '#radioButton2' ).click( function () { if ($( this ).is( ':checked' )) { $( "#dropdown1" ).prop( "disabled" , false ); $( "#dropdown2" ).prop( "disabled" , false ); $( "#dropdown3" ).prop( "disabled" , false ); } }); You can also use the else condition for all these radio button click as per your business logic.

Suraj Kumar · Answer

I have created a test razor view with enable-disable functionality. You can check and modify as per your need. To learn MVC first you should focus on learning JQuery with simple even like onclick, onchange, etc. @{ Layout = null ; } > html > head > script src = "http://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.js" type = "text/javascript" > script > meta name = "viewport" content = "width=device-width" /> title > EnableDisable title > head > body > div > table > tr > td > h3 style = "text-align:center" > Enable and disable textbox and dropdown on radio button click. h3 > hr /> td > tr > tr > td > input type = "radio" id = "rdoButton1" name = "rdoPriority" /> Low input type = "radio" id = "rdoButton2" name = "rdoPriority" /> Medium input type = "radio" id = "rdoButton3" name = "rdoPriority" /> High td > tr > tr > td > hr /> td > tr > tr > td > label > Low Priority: label > @Html.DropDownList("ddlLowDropDown", new List SelectListItem > { new SelectListItem{ Text = "Option 1" , Value = "1" }, new SelectListItem{ Text = "Option 2" , Value = "2" }, new SelectListItem{ Text = "Option 3" , Value = "3" }, }) label > Reason: label > input type = "text" class = "form-control" id = "txtLow" /> td > tr > tr > td > hr /> label > Medium Priority: label > @Html.DropDownList("ddlMediumDropDown", new List SelectListItem > { new SelectListItem{ Text = "Option 1" , Value = "1" }, new SelectListItem{ Text = "Option 2" , Value = "2" }, new SelectListItem{ Text = "Option 3" , Value = "3" }, }) label > Reason: label > input type = "text" class = "form-control" id = "txtMedium" /> hr /> td > tr > tr > td > label > Low Priority: label > @Html.DropDownList("ddlHighDropDown", new List SelectListItem > { new SelectListItem{ Text = "Option 1" , Value = "1" }, new SelectListItem{ Text = "Option 2" , Value = "2" }, new SelectListItem{ Text = "Option 3" , Value = "3" }, }) label > Reason: label > input type = "text" class = "form-control" id = "txtHigh" /> hr /> td > tr > table > div > script > //To disable all dropdown $("#ddlLowDropDown").prop("disabled", true); $("#txtLow").prop("disabled", true); $("#ddlMediumDropDown").prop("disabled", true); $("#txtMedium").prop("disabled", true); $("#ddlHighDropDown").prop("disabled", true); $("#txtHigh").prop("disabled", true); //Re-enable on radio button click $('#rdoButton1').click(function () { if ($(this).is(':checked')) { $("#ddlLowDropDown").prop("disabled", false); $("#txtLow").prop("disabled", false); //Disable other dropdown and text box $("#ddlMediumDropDown").prop("disabled", true); $("#txtMedium").prop("disabled", true); $("#ddlHighDropDown").prop("disabled", true); $("#txtHigh").prop("disabled", true); } }); $('#rdoButton2').click(function () { if ($(this).is(':checked')) { $("#ddlMediumDropDown").prop("disabled", false); $("#txtMedium").prop("disabled", false); //Disable other dropdown and text box $("#ddlLowDropDown").prop("disabled", true); $("#txtLow").prop("disabled", true); $("#ddlHighDropDown").prop("disabled", true); $("#txtHigh").prop("disabled", true); } }); $('#rdoButton3').click(function () { if ($(this).is(':checked')) { $("#ddlHighDropDown").prop("disabled", false); $("#txtHigh").prop("disabled", false); //Disable other dropdown and text box $("#ddlLowDropDown").prop("disabled", true); $("#txtLow").prop("disabled", true); $("#ddlMediumDropDown").prop("disabled", true); $("#txtMedium").prop("disabled", true); } }); script > body > html > I have attached that test project for your reference also.

Gajendra Jangid · Answer

"text/javascript" > $( "#Yes" ).click(function() { $( "#discountselection" ).attr( "disabled" , false ); //$("#discountselection").show(); //To Show the dropdown }); $( "#No" ).click(function() { $( "#discountselection" ).attr( "disabled" , true ); //$("#discountselection").hide();//To hide the dropdown }); "discountselection" id= "discountselection" disabled= "disabled" > "1 Year" selected= "selected" >1 Year "2 Years" >2 Years "3 Years" >3 Years

vinoth kumar · Answer

HIII suraj kumar I am learning MVC.so i need the html code for the relevant code u given.using razor view . Actually what i need is . i have three radiobutton. if i click one radiobutton some text box can be shown and some drodownbox can be disable. these two action perform in a single click.and i click the another two radiobutton the dropdown box can be enable and the textbox can be in hide. tq

vinoth kumar · Answer

I am using MVC .web based application.using javascript and jquery both.

Suraj Kumar · Answer

In which language you are working - C# or VB.Net? Is it windows or web application? If web based then do you want to enable or disable function using Javascript or JQuery? Please explain and it will be helpful to all those who will want to answer your question. As based on your clarification answer slightly may differ from each other.

disable the dropdownbox when i click the radiobutton

Answers (6)