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);
}
});
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);
});