基於單選按鈕禁用下拉列表

目標：
如果選擇「日期」，則可以選擇開始日期和結束日期的下拉列表。如果選擇「僅限所有...」，背景中的開始日期和結束日期將爲灰色，並且無法單擊向下箭頭。這些下拉列表是禁用的。基於單選按鈕禁用下拉列表

問題：
我不知道如何在前端代碼中創建它。

信息：
*的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

基於單選按鈕禁用下拉列表

回答

相關問題