3

I'm trying to disable/enable a input box within a table when I toggle with a bootstrap-switch button. 

<table class="table .table-striped">
  <thead>
    <tr>
      <th>Number</th>
      <th>Inputbox</th>
      <th>checkbox</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> 1 </td>
      <td><input id="some_value" type="number" class="form-control input-md" value=""></td>
      <td><input data-size="small" type="checkbox" id="constraint_checkbox" ></td>
    </tr>
    <tr>
      <td> 2 </td>
      <td><input id="some_value" type="number" class="form-control input-md" value=""></td>
      <td><input data-size="small" type="checkbox" id="constraint_checkbox" ></td>
    </tr>
    <tr>
      <td> 3 </td>
      <td><input id="some_value" type="number" class="form-control input-md" value=""></td>
      <td><input data-size="small" type="checkbox" id="constraint_checkbox" ></td>
    </tr>
  </tbody>
</table>

-- jQuery method 1: this doesn't work at all. 

$('#constraint_checkbox').on('switchChange', function(event, state) {
    $(this).prop('enable', true);
  })

-- method 2 : this only disable the first one

 $(selector).on('switchChange.bootstrapSwitch', function(event, state) {
     if ($(selector).is(':checked') == false){
       $('#some_value').val('').prop('disabled', true);
      }
     else {
       $('#some_value').val('').prop('disabled', false);
      }
 });
jashuang1130
  • 429
  • 7
  • 21
  • You have your selectors mixed up... Not going to solve it for you but here is a hint -> $(this).prop('enable', true); to $('#some_value').prop('enable', true); I would do something different here is a similar problem you get the idea -> http://jsfiddle.net/arunpjohny/m6PVz/1/ – Mikes3ds Dec 12 '16 at 23:16

1 Answers1

4

You can use this to toggle the disabled attribute of the some_value input:

$('#constraint_checkbox').on('change', function(event, state) {
  var status = $('#some_value').prop('disabled');
  $('#some_value').prop('disabled', !status);
});
Robin Mackenzie
  • 18,801
  • 7
  • 38
  • 56