禁用單選按鈕上的下拉框單擊

我有兩個單選按鈕和一個下拉框，如下所示。我想要做的是： 1.當選中no時，隱藏或灰掉下拉框， 2.選中yes後，顯示下拉框。禁用單選按鈕上的下拉框單擊

任何指針，將不勝感激！

<td colspan="4"> 
<input name="discount" type="radio" id="Yes" value="Yes" />Yes 
<input name="discount" type="radio" id="No" value="No" checked="checked" />No<br /> 
<select class="purple" name="discountselection" id="discountselection"> 
<option value="1 Year" selected="selected">1 Year</option> 
<option value="2 Years">2 Years</option> 
<option value="3 Years">3 Years</option> 
</select>     
</td>

來源

2010-09-13 109221793

<script type="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 
        }); 
    </script>

此外，基於頁面加載選擇默認設置單選按鈕的下拉菜單的顯示風格，或disabled屬性在HTML中。

<select name="discountselection" id="discountselection" disabled="disabled"> 
    <option value="1 Year" selected="selected">1 Year</option> 
    <option value="2 Years">2 Years</option> 
    <option value="3 Years">3 Years</option> 
    </select>

來源

2010-09-13 14:43:37

您需要將select控制設置爲disabled並使用類似的代碼這一個：

$(function(){ 
    $('input:radio[name=discount]').one('change', function(){ 
     $('.purple').removeAttr('disabled'); 
    }); 
});

見http://www.jsfiddle.net/A3BuQ/6/

參考：.one()，.removeAttr()

來源

2010-09-13 14:39:15 jAndy

我在頁面上有其他單選按鈕。這會影響到那些嗎？ – 109221793 2010-09-13 14:41:08

@TaraWalsh：是的。我調整了代碼以使其更具體。 – jAndy 2010-09-13 14:43:24

酷，我已經把這個JavaScript代碼放在我的HTML文檔的頂部，就像這樣：這是使用這段代碼的正確方法嗎？現在它似乎不工作。 – 109221793 2010-09-13 14:45:18

$('input:radio[name="discount"]').change(function() { 
    if ($(this).val()=='Yes') { 
     $('#discountselection').attr('disabled',true); 
    } else 
     $('#discountselection').removeAttr('disabled'); 
});

http://jsfiddle.net/uSmVD/

來源

2010-09-13 14:42:02 Robert

您可以用jQuery隱藏：

$(document).ready(function(){  

$('#discountselection').hide(); 

     $('#No').click(function(){ 
      $('#discountselection').hide(); 
     }); 

     $('#Yes').click(function(){ 
      $('#discountselection').show(); 
     }); 
});

檢查： http://www.jsfiddle.net/cFUsU/

更新：加入$（文件）。就緒（）;方法來開始設置這個代碼，以行動時，該頁面已準備就緒

來源

2010-09-13 14:42:40 d2burke

嗨，我應該在哪裏插入這個JavaScript？我有點新手。 – 109221793 2010-09-13 14:52:41

你可以把這個'裏面<腳本類型=「文/ JavaScript的> //代碼在這裏你裏面''標籤在你的HTML 見上面'標籤：我做了些修改爲您 – d2burke 2010-09-13 14:57:36

呀我已經做到了，但它似乎並沒有爲我工作： - \還有什麼我需要做的？ – 109221793 2010-09-13 15:00:25

$(function(){ 
    $('input:radio').bind('change', function(){ 
    $('#discountselection').attr('disabled', !$("#yes").is(":checked")); 
    }); 
});

來源

2010-09-13 14:44:00 elektronikLexikon

這會做到這一點？

$('input:radio').bind('change', function(){ 
    $('select').attr('disabled', $(this).val() == "No"); 
});

測試過，效果很好。祝你好運。

來源

2010-09-13 14:44:33 mkoistinen

這很麻煩，不去除'disabled'屬性會導致某些瀏覽器仍然禁用該元素，即使它的值爲0 。實際上，你設置了哪個值並不重要，只要屬性「disabled」存在，一個元素必須被禁用（w3c）。 – jAndy 2010-09-13 15:16:56

禁用單選按鈕上的下拉框單擊

回答

相關問題