Как Включать и Дезактивировать Кнопку?

У меня есть следующая проблема:

1) Когда я звоню в функцию function add(button) нужно дезактивировать кнопку "Agregar", до сих пор функционируй ok, проблема начинается в таблице <table id="target">.... в момент удаления статьи нужно включать кнопку снова.

2) Кнопка <button id="run" class="btn btn-primary">Enviar</button> нужно включать или дезактивировать только, когда она или ячейки QtyValue будьте превосходящим 0.

Это мой код:

function add(button) {
  var row = button.parentNode.parentNode;
  var cells = row.querySelectorAll('td:not(:last-of-type)');
  button.disabled = true;
  addToCartTable(cells);
}

function remove() {
  var row = this.parentNode.parentNode;
  document.querySelector('#target tbody')
    .removeChild(row);
  var celda = $(this).closest('tr').find('td:eq(0)').text();
  var botones = document.getElementsByClassName('btn');
  for (var i = 0; i < botones.length; i++) {
    botones[i].addEventListener('click', (function (i) {
      return function () {
        this.disable = false;
      };
    })(i), false);
  }
};

function addToCartTable(cells) {
  var registro = cells[0].innerText;
  var name = cells[2].innerText;
  var price = cells[3].innerText;
  var newRow = document.createElement('tr');
  
  newRow.setAttribute('data-price', price.substring(0));
  newRow.appendChild(createCell(registro));
  newRow.appendChild(createCell(name));
  newRow.appendChild(createCell(price));
  newRow.appendChild(createCell('1'));
  newRow.appendChild(createCell(price));

  var cellInputQty = createCell();
  cellInputQty.appendChild(createInputQty());
  newRow.appendChild(cellInputQty);

  var cellRemoveBtn = createCell();
  cellRemoveBtn.appendChild(createRemoveBtn())
  newRow.appendChild(cellRemoveBtn);

  document.querySelector('#target tbody').appendChild(newRow);
}

function createInputQty() {
  var inputQty = document.createElement('input');
  inputQty.type = 'number';
  inputQty.required = 'true';
  inputQty.className = 'form-control'
  inputQty.min = 1; // mínimo un producto
  inputQty.onchange = onQtyChange;
  inputQty.value = 0;
  return inputQty;
}

function createRemoveBtn() {
  var btnRemove = document.createElement('button');
  btnRemove.className = 'btn btn-xs btn-danger';
  btnRemove.onclick = remove;
  btnRemove.innerText = 'Eliminar';
  return btnRemove;
}

function createCell(text) {
  var td = document.createElement('td');
  if (text) {
    td.innerText = text;
  }
  return td;
}

function onQtyChange(e) {
  var row = this.parentNode.parentNode;
  var cellPrice = row.querySelector('td:nth-child(3)');
  var prevPrice = Number(row.getAttribute('data-price'));
  var newQty = Number(this.value);
  var total = prevPrice * newQty;

  var QtyValue = row.querySelector('td:nth-child(4)');
  QtyValue.innerText = newQty;
  cellPrice.innerText = '$' + total;
  if (QtyValue > 0) {
    document.getElementById('run').disabled = false;
  } else {
    document.getElementById('run').disabled = true;
  }
}

function createFormData(info) {
  jsonObject = {};
  var datos = 'datos';
  jsonObject[datos] = info;
  return jsonObject;
}

$('#run').click(function () {
  var table = $('#target').tableToJSON();
  console.log(JSON.stringify(createFormData(table)));
  console.log('se inicia el ajax');
  $.ajax({
    type: "POST",
    url: "/WebMethod.aspx/SendMail",
    data: JSON.stringify({ datos: JSON.stringify(createFormData(table)) }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: OnSuccess,
    failure: function (response) {
      alert(response.d);
    }
  });
  alert(JSON.stringify(table));
});

function OnSuccess(response) {
  console.log(JSON.stringify(response));
  if (response.d == "True") {
    alert('Email Enviado Correctamente');
  } else {
    alert('Fallo en envio');
  }
}

$(document).ready(function () {
  document.getElementById('run').disabled = true;
});

$(document).ready(function () {
  document.getElementById('run').disabled = true;
  $('#source').DataTable({
    "language": {
      "sProcessing": "Procesando...",
      "sLengthMenu": "Mostrar _MENU_ registros",
      "sZeroRecords": "No se encontraron resultados",
      "sEmptyTable": "Ningún dato disponible en esta tabla",
      "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
      "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
      "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
      "sInfoPostFix": "",
      "sSearch": "Buscar:",
      "sUrl": "",
      "sInfoThousands": ",",
      "sLoadingRecords": "Cargando...",
      "oPaginate": {
        "sFirst": "Primero",
        "sLast": "Último",
        "sNext": "Siguiente",
        "sPrevious": "Anterior"
      },
      "oAria": {
        "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
      }
    }
  });
});
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#target td {
  /* para centrado vertical de contenido */
  vertical-align: middle;
}

#target tr > *:nth-child(4) {
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://www.adt.com.ar/js/jquery.min.js"></script>
<script type="text/javascript" src="http://lightswitch05.github.io/table-to-json/javascripts/jquery.tabletojson.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

<form id="form1">
  <div class="table-responsive">
    <HeaderTemplate>
      <table id="source" class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>#</th>
            <th>Código</th>
            <th>Nombre</th>
            <th>Precio</th>
            <th>Acciones</th>
          </tr>
        </thead>
        <tbody>
    </HeaderTemplate>
    <ItemTemplate>
          <tr>
            <td>1000</td>
            <td>001</td>
            <td>Producto 1</td>
            <td>1500</td>
            <td>
              <button onclick="add(this)" class="btn btn-primary btn-xs" id="btn">
                Agregar
              </button>
            </td>
          </tr>
    </ItemTemplate>
    <ItemTemplate>
          <tr>
            <td>2000</td>
            <td>002</td>
            <td>Producto 2</td>
            <td>2500</td>
            <td>
              <button onclick="add(this)" class="btn btn-primary btn-xs" id="btn">
                Agregar
              </button>
            </td>
          </tr>
        </ItemTemplate>
        <ItemTemplate>
          <tr>
            <td>3000</td>
            <td>003</td>
            <td>Producto 3</td>
            <td>3500</td>
            <td>
              <button onclick="add(this)" class="btn btn-primary btn-xs" id="btn">
                Agregar
              </button>
            </td>
          </tr>
    </ItemTemplate>
    <ItemTemplate>
          <tr>
            <td>4000</td>
            <td>004</td>
            <td>Producto 4</td>
            <td>4500</td>
            <td>
              <button onclick="add(this)" class="btn btn-primary btn-xs" id="btn">
                Agregar
              </button>
            </td>
          </tr>
    </ItemTemplate>
    <FooterTemplate>
        </tbody>
      </table>
    </FooterTemplate>
  </div>
  
  <button id="run" class="btn btn-primary">Enviar</button>
  <div class="table-responsive">
    <table id="target" class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>Código</th>
          <th>Nombre</th>
          <th>Precio</th>
          <th>qty</th>
          <th>unit</th>
          <th>Cantidad</th>
          <th>Acciones</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</form>

Какая-то идея, что я врежу?

5
задан 29.03.2017, 15:43
0 ответов