Enable button when selecting rows of the table and disable button when not having any selected

Navigation
0

Buenos Dias, I have a table and I would like if a line is selected, a button will be enabled and if there are no rows selected, the button will be disabled. I leave my code here 

<div class="box">
    <div class="box-header">
        <h3 class="box-title"><label>All Medications</label></h3>
    </div>
    <div class="box-body">
        <div class="header pull-left"><input type="button" id="btn-refill" class="btn btn-primary" value="Refill Request" onclick="Ejecutar();"/></div>
        <table data-toggle="table"
               data-click-to-select="true"
               data-pagination="true"
               data-page-list="[5, 10, 15, 20]"
               data-height="340"
               data-search="true" class="table-hover table-responsive" id="tableRoomList">
            <thead>
                <tr>
                    <th data-field="state" data-checkbox="true" id="check"></th>
                    <th data-field="name">Name</th>
                    <th data-field="stargazers_count">Stars</th>
                    <th data-field="forks_count">Forks</th>
                    <th data-field="description">Description</th>
                </tr>
            </thead>
            <tbody>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>6</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>6</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>
                <tr><td data-field="state" data-checkbox="false" id="check"></td><td>Jorge</td><td>5</td><td>AAA</td><td>Description</td></tr>

            </tbody>

            <tfoot>
                <tr>
                    <th data-field="state" data-checkbox="true"></th>
                    <th data-field="name">Name</th>
                    <th data-field="stargazers_count">Stars</th>
                    <th data-field="forks_count">Forks</th>
                    <th data-field="description">Description</th>
                </tr>
            </tfoot>
        </table>

        </div>
    </div>

<script>
$('td[id="check"]').each(function () {
     var myCheck = $(this).prop('checked');
     if (myCheck) {
         estado = true;
     }
});
</script>
    
asked by Raidel Fonseca 28.11.2017 в 18:43
source

1 answer

1

You seem to be using Bootstrap Table .

Said plugin offers different events to which you can subscribe.

What you need is to find what are the events that trigger when changing the row selection (eg: check.bs.table, uncheck.bs.table, check-all.bs.table, uncheck-all.bs.table ).

Then you must subscribe to those events a function which checks the number of rows selected and based on that, enable ( disabled=false ) or disable ( disabled=true ) the% button btn-refill

Example: 

$(function() {
  var $table = $('#tableRoomList');
  $table.on('check.bs.table', toggleBtn);
  $table.on('uncheck.bs.table', toggleBtn);
  $table.on('check-all.bs.table', toggleBtn);
  $table.on('uncheck-all.bs.table', toggleBtn);
  toggleBtn();

  //

  function toggleBtn() {
    var rows = $table.bootstrapTable('getSelections');
    $('#btn-refill').prop('disabled', rows.length === 0);
  }

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

<div class="box">
  <div class="box-header">
    <h3 class="box-title"><label>All Medications</label></h3>
  </div>
  <div class="box-body">
    <div class="header pull-left">
      <input type="button" id="btn-refill" class="btn btn-primary" value="Refill Request" onclick="Ejecutar();" />
    </div>
    <table data-toggle="table" data-click-to-select="true" data-pagination="true" data-page-list="[5, 10, 15, 20]" data-height="340" data-search="true" class="table-hover table-responsive" id="tableRoomList">
      <thead>
        <tr>
          <th data-field="state" data-checkbox="true" id="check"></th>
          <th data-field="name">Name</th>
          <th data-field="stargazers_count">Stars</th>
          <th data-field="forks_count">Forks</th>
          <th data-field="description">Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>6</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>6</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>
        <tr>
          <td data-field="state" data-checkbox="false" id="check"></td>
          <td>Jorge</td>
          <td>5</td>
          <td>AAA</td>
          <td>Description</td>
        </tr>

      </tbody>

      <tfoot>
        <tr>
          <th data-field="state" data-checkbox="true"></th>
          <th data-field="name">Name</th>
          <th data-field="stargazers_count">Stars</th>
          <th data-field="forks_count">Forks</th>
          <th data-field="description">Description</th>
        </tr>
      </tfoot>
    </table>

  </div>
</div>
    
answered by 28.11.2017 / 19:49
source
I can not copy documents from one directory to another How to condition the WHERE with a variable and a temporary table ?, dynamic query [closed]