CODEWITHSUNDEEP
phpjquery
user1687891
user1687891

Reputation: 864

Disable the button in the table based on the td text

I have a table as follows:

<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>Order ID</th>
            <th>Name</th>
            <th>Address</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <?php
        foreach ($rslt as $value) {
        ?>
            <tr>
                <td><?= $value['order_id']?></td>
                <td><?= $value['cust_name']?></td>
                <td><?= $value['address']?></td>
                <td><?= $value['st_size']?></td>
                <td class="status"><?= $value['status']?></td>
                <td><button class="btn btn-primary btn-sm btn-assign" type="button" data-id="<?=$value['order_id']?>">Assign</button></td>
            </tr>
        <?php
        } 
        ?>
    </tbody>
</table>

What I am trying to do is, if the $value['status'] is "assigned" then I want to disable the button i.e next to this td. I have tried following code. But i could not disable the button.

$("#dataTable tbody").find("tr").each(function() {
    var ratingTdText = $(this).find('td.status').text(); 
    if (ratingTdText == 'assigned')
        $(this).parent('tr').find(".btn-assign").prop("disabled",true);

});

Upvotes: 1

Views: 469

Answers (4)

SilverSurfer
SilverSurfer

Reputation: 4368

Here you got an easy way to do it with has and contains selectors:

$('tr:has(td.status:contains(assigned)) .btn-assign').prop("disabled", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>Order ID</th>
      <th>Name</th>
      <th>Address</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>b2</td>
      <td>c3</td>
      <td>d4</td>
      <td class="status">assigned</td>
      <td><button class="btn btn-primary btn-sm btn-assign" type="button" data-id="d">Assign</button></td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
      <td>c2</td>
      <td>d2</td>
      <td class="status">Not assign</td>
      <td><button class="btn btn-primary btn-sm btn-assign" type="button" data-id="d">Assign</button></td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
      <td>c3</td>
      <td>d3</td>
      <td class="status">assigned</td>
      <td><button class="btn btn-primary btn-sm btn-assign" type="button" data-id="d">Assign</button></td>
    </tr>
    <tr>
      <td>a4</td>
      <td>b4</td>
      <td>c4</td>
      <td>d4</td>
      <td class="status">Not assign</td>
      <td><button class="btn btn-primary btn-sm btn-assign" type="button" data-id="d">Assign</button></td>
    </tr>
  </tbody>
</table>

Note this will select any td with containing word "assigned" even if there are other words.

Upvotes: 1

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Why use Javascript, you can fix it on the PHP end.

 <td><button <?= ($value['status']=='assigned')?'disabled':''; ?> class="btn btn-primary btn-sm btn-assign" type="button" data-id="<?=$value['order_id']?>">Assign</button></td>

Upvotes: 0

Nick Tirrell
Nick Tirrell

Reputation: 431

To add to what Zenoo said - there's no need to call find when you have a specific selector for status. Always strive to make the simplest form of the argument.

if ($('.status').text() == 'assigned') {
     $('.btn-assign').prop("disabled", true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>Order ID</th>
      <th>Name</th>
      <th>Address</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td class="status">assigned</td>
      <td><button class="btn btn-primary btn-sm btn-assign" type="button" data-id="d">Assign</button></td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Zenoo
Zenoo

Reputation: 12880

Your button doesn't have the id btn-assign, it's a class. Use . instead of #.

Plus, in your case, $(this).parent('tr') won't find anything, since this is already the tr.

$('#dataTable tbody tr').each(function() {
  if ($('.status', this).text() == 'assigned') {
    $('.btn-assign', this).prop("disabled", true);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>Order ID</th>
      <th>Name</th>
      <th>Address</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td class="status">assigned</td>
      <td><button class="btn btn-primary btn-sm btn-assign" type="button" data-id="d">Assign</button></td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Related Questions