disable the dropdownbox when i click the radiobutton

vinoth kumar

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

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Suraj Kumar7y ago
Accepted 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.
+1
Gajendra Jangid7y ago
1. "text/javascript">
2. $("#Yes").click(function() {
3. $("#discountselection").attr("disabled", false);
4. //$("#discountselection").show(); //To Show the dropdown
5. });
6. $("#No").click(function() {
7. $("#discountselection").attr("disabled", true);
8. //$("#discountselection").hide();//To hide the dropdown
9. });
12. "discountselection" id="discountselection" disabled="disabled">
13. "1 Year" selected="selected">1 Year
14. "2 Years">2 Years
15. "3 Years">3 Years
+1

Suraj Kumar7y ago

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>EnableDisabletitle>
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.

vinoth kumar7y ago

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.

vinoth kumar7y ago

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

Suraj Kumar7y ago

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.