Question

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

这是我的代码

<!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>

上面的代码不起作用。任何人都可以帮我解决这个问题吗？

Answer 1

DOM尚未就绪：

$(function() {
    $('#select').on('change', function(){
        $('#myclass').prop('disabled', this.value == '4');
    });
});

Answer 2

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

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

<!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>

基于下拉值的已禁用输入标记无效

2 个答案: