CODEWITHSUNDEEP
jqueryhtmljquery-ui
Rakesh
Rakesh

Reputation: 19

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

How to enabled / disabled selectbox based on textbox value in dynamic way, when user entered correct in inputbox then in selectbox should enabled in dynamic way.

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

Upvotes: 0

Views: 61

Answers (1)

Samet Conrad
Samet Conrad

Reputation: 201

(This is how i understand your question and I am not able to ask right now, so here is my answer)

I just implemented it like when the input field is the Date from Today or an day which is already in the past, its a valid Input and then the selection in the same Table row will be enabled.

i added a new class date-picker to the input fields for selecting all of them together and checking when a change happens:

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

in the js i check if any change happens to one of these input fields, if yes i will trigger the function and creating the todays date for checking if the input is valid. $(this) gives us the actuall changed element and with .closest('tr').find('select') we will get the selection box in our current table row. Then we just have to set .prop('disabled', false) if its not valid we change it back to disabled.

$('.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')
  }
})

also i will leave you the changed fiddle here: https://jsfiddle.net/6uae9j5n/

Hopes that my answer helps and will clear things a little more up. :)

Upvotes: 1

Related Questions