Question

我有一个表单，根据用户对会员级别的选择收集付款。当他们选择级别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;
}

正如您所看到的，我已自动填充Amount字段但我不知道如何标记为只读和保留离开字段而不是读取的能力仅在选择自定义金额时。

我在网站上使用jQuery 1.8.3并且愿意使用jQuery做我用vanilla JS做的事情。

Answer 1

我认为您可以测试该值，如果该值不为空，则使用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

使用JS将表单字段标记为只读

1 个答案: