0

我有一个表格，可以根据用户选择的会员级别来收取付款。当他们选择级别时，JS 会自动填写表格上的金额。我还想做的是readonly在他们选择一个选项后将该字段标记为。但是有一个问题！有一个输入自定义金额的选项（我设置了最低金额）。如果选择了此选项，那么我希望单独保留金额字段以允许用户输入他们的金额。

readonly 除非他们选择自定义金额，否则我如何让该字段自动填充并标记为？

这是我的 HTML 和 JS（注意：我只显示涉及的两个字段的 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 是为了做我对 vanilla 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 回答