web-dev-qa-db-ja.com

選択値をデフォルトにリセットせずにjQueryでwebform選択ボックスを無効にする方法

以下にフォームのセクション(選択フィールド)のWebフォームがあります。

<select id="edit-submitted-bring-alcohol" name="submitted[bring-alcohol]" class="form-select">
    <option value="yes" selected="selected">Yes</option>
    <option value="no">No</option>
</select>

Jqueryを使用して、このフィールドを動的に設定します。

if (age < 19) {
    $('#edit-submitted-bring-alcohol').val('no');
    $('#edit-submitted-bring-alcohol').prop('disabled', true);
}

これはうまくいきます。ユーザーが年齢を入力すると、このメソッドは自動的に選択を「いいえ」に変更し(19歳未満の場合)、それ自体で無効になります。しかし、私が今持っている問題は選択フィールドが無効になっている場合、受け取った送信された値は「はい」です(どうやらデフォルト値が選択されるようです)。

誰かが私を手伝ってくれる?

1
movila

これを行うには、まず「selected」属性を削除し、無効にする前に、新しく選択された属性を設定します。

例えば:

if (age < 19) {
    $("#edit-submitted-bring-alcohol option:selected").removeAttr('selected');
    $("#edit-submitted-bring-alcohol option[value='no']").attr('selected', 'selected')
    $('#edit-submitted-bring-alcohol').val('no');
    $('#edit-submitted-bring-alcohol').prop('disabled', true);
}

これは、いじくりのjsfiddleリンクです: http://jsfiddle.net/AwUwt/

編集:または、選択ボックスを非表示にすることもできます

if (age < 19) {
    $("#edit-submitted-bring-alcohol option:selected").removeAttr('selected');
    $("#edit-submitted-bring-alcohol option[value='no']").attr('selected', 'selected')
    $('#edit-submitted-bring-alcohol').val('no');
    $('#edit-submitted-bring-alcohol').css('display', 'none');
}
2
David Thomas