javascript - ドロップダウンと送信ボタンを無効にする

Question

私は、ページが読み込まれたときに単一のドロップダウン選択ボックスを有効にし、テキストボックス、ボタンなどの残りのものをすべて無効にする必要があるような方法で検証を必要とする Web アプリを開発しようとしています。最初の選択ボックスからアイテムを選択すると、他のテキストボックスのみが有効になります。

すべてのフィールドの選択が完了したら、送信ボタンのみを有効にする必要があります。

効率的に設計できるように、javascript で方法を提案するか、コード スニペットを提供してください。

Answer 1

すべての選択ボックスには、関数を起動する onchange 属性があり、その関数で、テキスト ボックスやその他の必要なものを有効にするように記述できます。

<select onchange = 'func();'></select>

その後、テキストボックスにはonkeypress属性があり、sumbitボタンを有効にするために書き込むことができるという機能を起動します

<input type='text' onkeypress="func();"/>

この関数では、すべてのテキスト ボックスが入力されているかどうかを確認し、送信ボタンを有効にすることができます。

Answer 2

jquery を使用してみる必要があります。サンプル コードは以下のとおりで、テスト済みです。

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){

        $("#xyz").change(function(){
            var fields = $("input");
            fields.removeAttr("disabled");          
        });

    });

</script>


<form action="">

    <select name="xyz" id="xyz">
        <option value="">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>

    <input type="text" disabled="disabled"/>
    <input type="text" disabled="disabled"/>

</form>

遠慮なく尋ねてください。

Answer 3

最初に、選択リストの値を、有効にする必要があるフィールドにマップしましょう。複数のフィールドを一度に有効にできるように、クラスを使用できます。

var choiceFieldMapping = {
    'val1': '.first',
    'val2': '.second',
    // and so on
};

また、どの値が選択されているかを知る必要があります。

var selectedValues = {
    'val1': false,
    'val2': false,
    // and so on, all false by default
};

次に、すべての入力を無効にして選択を有効にします。

function resetDisable() {
    $('form :input').prop('disabled', true);
    $('form #firstSelect').prop('disabled', false);
}
resetDisable(); // Call it once to reset the form to initial state

ユーザーが選択したオプションを変更すると、次のようになります。

$('form #firstSelect').change(function() {
    // Current value
    var v = $(this).val();

    // Enable the fields
    resetDisable();
    $(choiceFieldMapping[v]).prop('disabled', false);

    // Update the selectedValues object
    selectedvalues[v] = true;

    // Check if all values have been selected
    var allSelected = Object.keys(selectedValues).every(function(key) {
        return selectedValues[key];
    });

    if (allSelected) {
        // Enable submit button
        $('form #submit').prop('disabled', false);
    }
});