1

我将创建一个包含四个值（一、二、三、四）的下拉列表。当用户选择（一、二或三）时，下拉列表下方的文本框必须允许用户在其中键入任何文本；但是当用户选择四时，文本框应该被禁用。

这是我的代码

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
    var $inputs = $('#myclass');
        $('#select').change(function(){
        $inputs.prop('disabled', $(this).val() === '4');
    });
</script>
<title>Choose one</title>
</head>
<body>
    <select id="select">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
    </select>
    <input type="text" id="myclass"/>
</body>
</html>

上面的代码不起作用。谁能帮我解决这个问题？

4

2 回答 2

2

DOM 还没有准备好：

$(function() {
    $('#select').on('change', function(){
        $('#myclass').prop('disabled', this.value == '4');
    });
});
于 2013-09-16T08:07:23.110 回答
1

您的 JavaScript 代码在 DOM 呈现之前被执行。

快速修复<body>：将您的 JavaScript 代码放在标记的末尾。像这样：

<!DOCTYPE html>
<html>
<head>
<title>Choose one</title>
</head>
<body>
    <select id="select">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
    </select>
    <input type="text" id="myclass"/>
    <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
    <script>
        var $inputs = $('#myclass');
        $('#select').change(function(){
           $inputs.prop('disabled', $(this).val() === '4');
        });
    </script>
</body>
</html>

另一种选择是在文档准备好时执行 JavaScript 代码，但是“快速修复”方法现在非常流行。这将是不同的（经典？）方法：

<script>
    $(document).ready(function () {
        var $inputs = $('#myclass');
        $('#select').change(function(){
           $inputs.prop('disabled', $(this).val() === '4');
        });
    });
</script>
于 2013-09-16T08:10:36.493 回答