单击单选按钮时不会禁用下拉菜单

Dropdown not disable when radio button is clicked

本文关键字：下拉菜单 单选按钮 单击      更新时间：2023-09-26

它应该工作，但不幸的是它没有工作。我不知道我的代码出了什么问题。当我在jsfiddle中尝试时，它是有效的，但在Notepad++中它不起作用。我不明白这是怎么回事。

<head>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
 $('input:radio[name="senior"]').change(function() {
        if ($(this).val()=='Yes') {
            $('#seniordis').attr('disabled',false);
        } else

            $('#seniordis').removeAttr('disabled', true);
    });
    </script>

</head>

Senior : 
<input name="senior" type="radio" id="Yes" value="Yes" />Yes
<input name="senior" type="radio" id="No" value="No" selected="selected" />No<br />  
<select name="seniordis" id="select">
<option value="100" >100% discount</option>
<option value="50">50% discount</option>
<option value="10">10% discount</option>
</select>                  
</td>

您的问题是，senoirdis是名称而不是id。您的id是select。

$().ready(function()
{
    $('input:radio[name="senior"]').change(function() {
        if ($(this).val()=='Yes') {
            $('#select').prop('disabled',false);
        } 
        else
        {
            $('#select').prop('disabled',true);
        }
    });
});

问题不在于代码问题在于您引用库的方式。更改引用以具有https://

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

它在Notepad++中不起作用，因为您正在brwoser中查看此文件，brwoser将有file://请求，而不是https://。它在你的小提琴工作，因为在那里你可能以不同的方式引用库，但有效的方式。

同时指出代码中的错误。

本线$('#seniordis').removeAttr('disabled', true);

这里seniordis在您的选择标签的name属性的值中，而不是id…所以使用$('[name="seniordis"]')按名称定位元素，或者使用$('#select')按id定位元素。

所以代码应该是

$('#select').attr('disabled', true);

或者这个

$('#select').removeAttr('disabled');

您的代码存在一些错误

  1. 这条线路

    input:radio[name="senior"]

    一定是这个

    input[name=senior]:radio

  2. 本线

    $('#seniordis').attr('disabled',false);

    必须是

    $('#select:input').removeAttr('disabled');

使用以下代码：

<div>
    <input name="senior" type="radio" id="Yes" value="Yes"  />Yes
    <input name="senior" type="radio" id="No" value="No" />No<br />
    <select name="seniordis" id="select">
        <option value="100">100% discount</option>
        <option value="50">50% discount</option>
        <option value="10">10% discount</option>
    </select>
</div>
<script type="text/javascript">
    $("input[name=senior]:radio").change(function () {
        if ($(this).val() == "Yes") {
            $('#select:input').removeAttr('disabled');
        }
        else {
            $('#select:input').attr('disabled', 'disabled');
        }
    });
</script>

$('input:radio[name="senior"]').change(function() {
    if ($(this).val() == 'Yes') {
        $('select[name="seniordis"]').attr('disabled',false);
    } else {
        $('select[name="seniordis"]').attr('disabled', true);
    }
});

jsFiddle

相关文章：