Как включить / отключить selectbox на основе значения текстового поля в Dynami c - PullRequest
Новая
       12

Как включить / отключить selectbox на основе значения текстового поля в Dynami c

0 голосов
/ 11 марта 2020

Как включить / отключить selectbox на основе значения текстового поля в динамическом c пути, когда пользователь правильно ввел в поле ввода, то в selectbox должен быть включен в динамическом c пути. 

<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>

1 Ответ

0 голосов
/ 11 марта 2020

(Это то, как я понимаю ваш вопрос, и я не могу сейчас его задать, поэтому вот мой ответ)

Я только что реализовал это как поле ввода Дата с сегодняшнего дня или день который уже находится в прошлом, его допустимый ввод, а затем будет разрешен выбор в той же строке таблицы.

я добавил новый класс 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') мы получим поле выбора в текущей строке таблицы. Тогда мы просто должны установить .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')
  }
})

также я оставлю вам измененную скрипку здесь: https://jsfiddle.net/6uae9j5n/

Надеюсь, что мой ответ поможет и прояснит ситуацию. :)

...