1

4 つの値 (One、Two、Three、Four) を含むドロップダウン リストを作成します。ユーザーが (1 つ、2 つ、または 3 つ) を選択した場合、ドロップダウン リストの下のテキスト ボックスには、ユーザーが任意のテキストを入力できるようにする必要があります。ただし、ユーザーが 4 つを選択すると、テキスト ボックスを無効にする必要があります。

これが私のコードです

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

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>

もう 1 つのオプションは、ドキュメントの準備ができたときに JavaScript コードを実行することですが、最近では「クイック フィックス」アプローチが非常に一般的です。これは別の (古典的な?) アプローチになります。

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