基于单选按钮禁用下拉列表

目标：
如果选择“日期”，则可以选择开始日期和结束日期的下拉列表。如果选择“仅限所有...”，背景中的开始日期和结束日期将为灰色，并且无法单击向下箭头。这些下拉列表是禁用的。基于单选按钮禁用下拉列表

问题：
我不知道如何在前端代码中创建它。

信息：
*的dropdownlists在ASP.net MVC创建4

*我使用jQuery 1.10和引导

enter image description here

 <input id="aa" type="radio" name="searchselection" value="all" style="display: inline-block;" checked> 
     <label for="aa" style="width: 100px; display: inline-block; ">All ...only</label> 


     <input id="dates" type="radio" name="searchselection" value="dates" style="display: inline-block;"> 
     <label for="dates" style="width: 100px; display: inline-block;">Dates</label> 


     @{ 
     DateTime myDate = DateTime.Today; 

     List<SelectListItem> myListSelectListItem_YearStartDate = new List<SelectListItem>(); 

     for (int i = 0; i < 10; i++) 
     { 
     myListSelectListItem_YearStartDate.Add(new SelectListItem { Text = (myDate.Year - i).ToString(), Value = (i + 1).ToString(), Selected = DateTime.Today.Year == (myDate.Year - i) ? true : false }); 
     } 
     } 

     @Html.DropDownList("YearStartDate", myListSelectListItem_YearStartDate)

来源

2015-06-15 What' sUP

Th是固定在following jsfiddle

我已经剥去了一些不需要的HTML属性（如样式标签 - 风格更好地应用在CSS中），也挖出了后端代码生成<select>为了简化这个例子并专注于解决方案。

让我们看看发生了什么：

<select class='js-date-selector' disabled='disabled'>

首先，你的每一个选择的元素已被更改，添加以下两个属性。该类允许从JavaScript（或JQuery）进行定位 - 请注意，js-前缀不是必需的，它只是将javascript类属性与其他属性分开的一种很好的方法。此外，使用一个类而不是一个id，这通常是最好的，因为它更容易重用，就像我们在这个例子中一样。

disabled属性是如何标记一个HTML元素，使其变灰。如果您打算在页面加载时将所有日期标记为选中状态，并且选中了“所有日期”，则意味着应禁用这些选择，那么您的HTML也需要将选择标记为加载时禁用。

接下来是做的触发位：

$('.js-all-or-dates').on('click',function() { 
    var justClicked = $(this), 
     dateSelectors = $('.js-date-selector'); 

    if (justClicked.attr('id') === 'aa') { 
     dateSelectors.attr('disabled', true); 
    } 
    else { 
     dateSelectors.attr('disabled', false); 
    }  
});

首先，我们绑定到click事件的功能，我们每一个.js-all-or-dates无线电输入。

其次，我们分配变量，使用justClicked = $(this)存储一个jQuery版本，只是点击和dateSelectors来存储所有的选择项目的元素，使用上述

最后提到的类，我们看什么只是点击并且如果它具有“所有日期”无线电输入的ID，则我们在所有选择元素上设置禁用属性。

此外，为了良好的实践和平稳的发展：===用于平等; $通过将结果分配给局部变量来最小化函数调用;并且var语句包含逗号分隔的声明。

来源

2015-06-15 14:52:08

你可以尝试像

$(document).on('change', 'input[type=radio][name=searchselection]', function() { 
    //func body 
    .... 
    if(this.value == *your choices*){ 
     //disable 
     $(YourDropdownSelector).attr('disabled', 'disabled'); 
    }else { 
     //enable again 
     $(YourDropdownSelector).removeAttr('disabled'); 
    } 
});

来源

2015-06-15 14:47:46 noobed

基于单选按钮禁用下拉列表

回答

相关问题