0

ユーザーが選択したメンバーシップ レベルに基づいて支払いを徴収するフォームがあります。レベルを選択すると、JS がフォームに金額を自動入力します。私がやりたいことはreadonly、オプションを選択した後にフィールドをマークすることです。しかし、落とし穴があります。カスタム金額を入力するオプションがあります (最低金額を設定しています)。このオプションが選択されている場合、金額フィールドをそのままにして、ユーザーが金額を入力できるようにします。

カスタム金額を選択しreadonly ない限り、フィールドに自動入力してマークを付けるにはどうすればよいですか?

これが私の HTML と JS です (注: フォーム全体ではなく、関連する 2 つのフィールドの HTML のみを表示しています)。

HTML

<!-- MEMBERSHIP SELECT -->
<div><label for="CAT_Custom_320540">Membership Level <span class="req">*</span></label></div>
  <select class="cat_dropdown" id="CAT_Custom_320540" name="CAT_Custom_320540">
    <option value=" ">-- Please select --</option>
    <option value="20.00">Basic $20</option>
    <option value="35.00">Regular $35</option>
    <option value="50.00">Advocate $50</option>
    <option value="100.00">Dedicated $100</option>
    <option value="250.00">Big Time $250</option>
    <option value="3500.00">Lifetime $3500</option>
    <option value="">Custom Amount</option>
    </select>

<!-- AMOUNT -->
<div><label for="Amount">Amount<span class="req">*</span> <span id="constraint-300-label"> (minimum: <span id="constraint-300">20.00</span>)</span></label></div>
<input name="Amount" type="text" class="cat_textbox" id="Amount"  />

JS

var select = document.getElementById('CAT_Custom_320540');
var input = document.getElementById('Amount');
    select.onchange = function() {
        input.value = select.value;
}

ご覧のとおり、金額フィールドは自動入力されていますが、読み取り専用としてマークし、カスタム金額が選択されている場合に読み取り専用ではないフィールドを残す機能を残す方法がわかりません。

私はサイトでjQuery 1.8.3を使用しています.jQueryを使用したいのは、バニラJSで行ったことです。

4

1 に答える 1

3

disabled値をテストして、値が空でない場合は属性を使用できると思います。

var select = document.getElementById('CAT_Custom_320540');
var input = document.getElementById('Amount');
    select.onchange = function() {
        input.value = select.value;
        if ($.trim(input.value).length)
         input.setAttribute('disabled',true);
        else
         input.removeAttribute('disabled');
}

JSFiddle

于 2013-03-13T07:15:19.153 に答える