Disable the button in the table based on the td text - php

Question

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);
});

Answer 1

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>

Answer 2

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>

Answer 3

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.

Answer 4

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>