禁用单选按钮上的下拉框单击

我有两个单选按钮和一个下拉框，如下所示。我想要做的是： 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

禁用单选按钮上的下拉框单击

回答

相关问题