Skip to main content
1 de 3
MoteCL
  • 862
  • 2
  • 16
  • 43

cambiar disabled td en una tabla con x-editable

Deseo poder hacer una tabla que me disable los td dependiendo del select option que yo seleccione.

Ejemplo: Si selecciono la Madera1 el primer y segundo td quedan habilitados y el tercero disableado con el boton enabled td al lado.

Pero si seleciono la Madera2 el segundo y tercero quedan habilitados(quitando el boton enabled td) y el primer td queda disableado con el boton enabled td.

Y si selecciono la Madera3 solo el primer td queda habilitado y el segundo con el tercero disableados con el boton enabled td al lado.

$('#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>

He intentado hacerlo con un 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':
            break;
          case 'Madera2':
            break;
          case 'Madera3':
            break;

    });
</script>

Espero haberme explicado bien. Saludos PD: Tambien si es posible que el boton enabled td pueda quitarle el disabled de ese td.

MoteCL
  • 862
  • 2
  • 16
  • 43