如何使用 jQuery 在 Select 事件中启用禁用的不同输入答案

【问题标题】：How to Enable Disabled different Input in Select Event using jQuery如何使用 jQuery 在 Select 事件中启用禁用的不同输入
【发布时间】：2016-02-07 08:54:22
【问题描述】：

当有人选择选项一然后使用 jQuery 启用第一个输入时，我想这样做

这里是示例代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-material">
  <label for="storeCategory">Store Details</label>

  <select class="form-control" id="storeABDetails">
    <option value="message">Message</option>
    <option value="image">Image</option>
    <option value="video">Video</option>
  </select>

</div>

<div class="form-group">
  <div class="col-sm-8 col-sm-offset-2">
    <div class="form-material">
      <input type="text" class="form-control" id="shortMessage" name="shortMessage" placeholder="Please enter the short message" >
      <label for="shortMessage">Short Message</label>
    </div>
  </div>
</div>

<div class="form-group">
  <div class="col-sm-8 col-sm-offset-2">
    <div class="form-material">
      <input type="file" id="image" name="storeImage">
      <label for="storeImage">Store Image</label>
    </div>
  </div>
</div>

<div class="form-group">
  <div class="col-sm-8 col-sm-offset-2">
    <div class="form-material">
      <input type="file" id="video" name="storeVideo">
      <label for="storeVideo">Store Video</label>
    </div>
  </div>
</div>

如果选择消息，则启用消息输入；如果选择图像和视频，则启用和禁用图像和视频选择。

我想要jquery怎么做，请帮帮我

【问题讨论】：

标签： javascript jquery html input onchange

【解决方案1】：

您需要使用change() 事件来检测select 的更改时间。
我已将 Message 的值更改为 shortMessage，以便更轻松地获取值并找到正确的输入。
使用.prop 函数启用\禁用输入。

var ddl = $('#storeABDetails').change(function() {
  var val = ddl.val();
  
  $('.form-material input').prop('disabled', true);
  $('#' + val).prop('disabled', false);
});

ddl.trigger('change')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-material">
  <label for="storeCategory">Store Details</label>

  <select class="form-control" id="storeABDetails">
    <option value="shortMessage">Message</option>
    <option value="image">Image</option>
    <option value="video">Video</option>
  </select>

</div>

<div class="form-group">
  <div class="col-sm-8 col-sm-offset-2">
    <div class="form-material">
      <input type="text" class="form-control" id="shortMessage" name="shortMessage" placeholder="Please enter the short message" >
      <label for="shortMessage">Short Message</label>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-8 col-sm-offset-2">
    <div class="form-material">
      <input type="file" id="image" name="storeImage">
      <label for="storeImage">Store Image</label>
    </div>
  </div>
</div>

<div class="form-group">
  <div class="col-sm-8 col-sm-offset-2">
    <div class="form-material">
      <input type="file" id="video" name="storeVideo">
      <label for="storeVideo">Store Video</label>
    </div>
  </div>
</div>

【讨论】：