I want to be able to make a table that disables me td depending on the select option that I select.
Example: If I select Wood1 the first and second td are enabled and the third one is disabled with the enabled button td next.
But if I select Wood2, the second and third are enabled (by removing the% enabled td button) and the first td is disabled with the% enabled td button.
And if I select Madera3 only the first td is enabled and the second one with the third one is disabled with the enabled button td next.
$('#table').editable({
container: 'body',
selector: 'td.task',
title: 'task',
type: "POST",
showbuttons: false,
type: 'text',
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
},
success: function(response) {
$(this).parent().find(".Item").click();
}
});
var ITEM = [];
$.each({
"Item1": "Item1",
"Item2": "Item2",
"Item3": "Item3",
"Item4": "Item4"
}, function(k, v) {
ITEM.push({
value: k,
text: v
});
});
$('#table').editable({
container: 'body',
selector: 'td.Item',
title: 'Item',
type: "POST",
showbuttons: false,
source: ITEM,
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
}
});<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<div class="col-sm-3">
<small>Clasificacion Producto</small>
<select class="form-group browser-default custom-select" id="clasificacion">
<option selected disabled>.::Clasificacion::.</option>
<option value="Madera1">Madera1</option>
<option value="Madera2">Madera2</option>
<option value="Madera3">Madera3</option>
</select>
</div>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Task</th>
<th>Item</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td data-name="task" class="task" data-type="text">001</td>
<td data-name="Item" class="Item" data-type="select">Item2</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td data-name="task" data-disabled="true" class="task" data-type="text">002</td>
<td data-name="Item" data-disabled="true" class="Item" data-type="select">Item1</td>
<td> <button id="enable" class="btn btn-sm btn-default">enable td</button></td>
</tr>
<tr>
<td>3</td>
<td data-name="task" class="task" data-type="text">003</td>
<td data-name="Item" class="Item" data-type="select">Item3</td>
<td></td>
</tr>
</tbody>
</table>I tried to do it with a switch.
<script>
$("#clasificacion").change(function() {
var valor = $(this).val(); // Capturamos el valor del select
var texto = $(this).find('option:selected').text(); // Capturamos el texto del option seleccionado
switch (texto) {
case 'Madera1':
var celdas = $('#table tbody > tr').find('td'); //ENCONTRAMOS EL TD
break;
case 'Madera2':
var celdas = $('#table tbody > tr').find('td'); //ENCONTRAMOS EL TD
break;
case 'Madera3':
var celdas = $('#table tbody > tr').find('td'); //ENCONTRAMOS EL TD
break;
});
</script>
I hope to have explained myself well. regards
PS: Also if it is possible that the% enabled button td can remove the disabled from that td .