如何以动态方式启用/禁用基于文本框值的选择框

Question

如何以动态方式启用/禁用基于文本框值的选择框，当用户在输入框中输入正确时，选择框应以动态方式启用。

<table class="table table-bordered">
   <thead>
      <tr>
         <th>Select</th>
         <th>Amount</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><input type="text" id="date1" class="form-control" name="pettycash_dt[]" required    placeholder="DD-MM-YYYY"/></td>
         <td>
            <select id="category1" class="form-control exp_id" disabled name="exp_id[]" >
               <option value="" selected disabled >Select one</option>
               <option value="10">abc</option>
               <option value="11">xyz</option>
            </select>
         </td>
      </tr>
      <tr>
         <td><input type="text" id="date2" class="form-control" name="pettycash_dt[]" required    placeholder="DD-MM-YYYY"/></td>
         <td>
            <select id="category2" class="form-control exp_id" disabled name="exp_id[]" >
               <option value="" selected disabled >Select one</option>
               <option value="10">abc</option>
               <option value="11">xyz</option>
            </select>
         </td>
      </tr>
      <tr>
         <td><input type="text" id="date3" class="form-control" name="pettycash_dt[]" required    placeholder="DD-MM-YYYY"/></td>
         <td>
            <select id="category3" class="form-control exp_id" disabled name="exp_id[]" >
               <option value="" selected disabled >Select one</option>
               <option value="10">abc</option>
               <option value="11">xyz</option>
            </select>
         </td>
      </tr>
   </tbody>
</table>

Answer 1

（我是这样理解你的问题的，我现在不能问，所以这是我的答案）

我只是实现了它，就像当输入字段是今天的日期或已经过去的一天时，它是一个有效的输入，然后将启用同一 Table 行中的选择。

我在输入字段中添加了一个新的 class date-picker 以便同时选择所有这些字段并检查何时发生更改：

 <td><input type="text" id="date2" class="form-control date-picker" name="pettycash_dt[]" required    placeholder="DD-MM-YYYY"/></td>

在 js 中，我检查这些输入字段之一是否发生任何更改，如果是，我将触发该功能并创建今天的日期以检查输入是否有效。 $(this) 为我们提供了实际更改的元素，使用 .closest('tr').find('select') 我们将在当前 table 行中获得选择框。然后我们只需要设置 .prop('disabled', false) 如果它无效，我们将其改回禁用状态。

$('.date-picker').on('change', function() {
  var currentDate = new Date();
  if ($(this).datepicker('getDate') <= currentDate) {
        $(this).closest('tr').find('select').prop('disabled', false)
  } else {
        $(this).closest('tr').find('select').prop('disabled', 'disabled')
  }
})

另外，我将把更改后的 fiddle 留给您： https://jsfiddle.net/6uae9j5n/

希望我的回答能帮到你，让事情更清楚一些。 :)

如何以动态方式启用/禁用基于文本框值的选择框

How to enabled / disabled selectbox based on textbox value in dynamic way

html

jquery

jquery-ui