在选定某个下拉选项之前，将字段设置为灰色。

Question

我在做一个学校的任务，我被困住了。

我希望根据下拉菜单中选择的内容，对输入字段进行灰色化。

https://jsfiddle.net/xdvan6vf/

​

function ccGrey() {
  if (document.getElementById("creditcard").onchane){
    alert("this doesnt work very well")
  }
}

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-16 control-label" for="payment-method">Payment Method</label>
  <div class="col-md-16">
    <select id="payment-method" name="payment-method" class="form-control order-form">
      <option value="1">Online</option>
      <option value="2">In Store</option>
    </select>
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-16 control-label" for="creditcard">Credit Card Number</label>
  <div class="col-md-16">
  <input id="creditcard" name="creditcard" type="text" placeholder="CC Number" class="form-control input-md order-form" onclick="ccGrey">
  </div>
</div>

​

Answer 1

我不明白您的目的是什么，但为了处理select选择的索引更改，您必须处理onChange on SELECT元素而不是INPUT事件，如下所示：

​

function selectChanged() {
  var x = document.getElementById("payment-method").value;
  document.getElementById("creditcard").disabled = (x == 1);
}
//Checking for initial run
selectChanged();

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-16 control-label" for="payment-method">Payment Method</label>
  <div class="col-md-16">
    <select id="payment-method" name="payment-method" class="form-control order-form" onChange="selectChanged()">
            <option value="1">Online</option>
            <option value="2">In Store</option>
        </select>
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-16 control-label" for="creditcard">Credit Card Number</label>
  <div class="col-md-16">
    <input id="creditcard" name="creditcard" type="text" placeholder="CC Number" class="form-control input-md order-form">
  </div>
</div>

​