Issue
I have gotten a lot of help from Stackoverflow (Many Thanks). The issue I am having here is that I have to click on all toggle buttons on the datatable to finally get the first Switch button on the first Row (Status) to get enabled not the rest on the (Status)Column, I have gotten it to work when I am not looping through with PHP... See screenshot and Code here:
$(document).on("change keyup", ".required", function(e)
{
let Disabled = $(".required").length;
$(".required").each(function()
{
if (this.checked) Disabled--;
});
if (Disabled)
{
$(".toggle-disabled").prop("disabled", true);
$(".toggle-disabled")[0].bootstrapToggle('disable');
}
else
{
$(".toggle-disabled").prop("disabled", false);
$(".toggle-disabled")[0].bootstrapToggle('enable');
}
});
<table id="MyTable" class="table table-responsive table-hover table-striped table-bordered border-primary table-sm align-middle" style="width:100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gmail</th>
<th>Pika</th>
<th style="text-align: center">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Brahim </td>
<td>Ameskroud</td>
<td>
<input class="form-check-input filled-in box required" type="checkbox"
data-toggle="toggle" data-size="xs" data-onlabel="Yes" data-offlabel="No" data-onstyle="success" data-offstyle="info">
<label class="form-check-label">No</label>
</td>
<td>
<input class="form-check-input filled-in box required" type="checkbox"
data-toggle="toggle" data-size="xs" data-onlabel="Yes" data-offlabel="No" data-onstyle="success" data-offstyle="info">
<label class="form-check-label">Yes</label>
</td>
<!-- Toggle button -->
<td style="text-align: center" >
<input type="checkbox" name="status" class="toggle-disabled" data-toggle="toggle" data-size="small" data-onlabel="Done" data-offlabel="Pending" data-onstyle="success"
data-offstyle="warning" onchange="updateStatus(17)" checked disabled>
</td>
<tr>
<td>Bel Air</td>
<td>John Baptist</td>
<td>
<input class="form-check-input filled-in box required" type="checkbox"
data-toggle="toggle" data-size="xs" data-onlabel="Yes" data-offlabel="No" data-onstyle="success" data-offstyle="info">
<label class="form-check-label">Yes</label>
</td>
<td>
<input class="form-check-input filled-in box required" type="checkbox"
data-toggle="toggle" data-size="xs" data-onlabel="Yes" data-offlabel="No" data-onstyle="success" data-offstyle="info">
<label class="form-check-label">Yes</label>
</td>
<!-- Toggle button -->
<td style="text-align: center" >
<input type="checkbox" name="status" class="toggle-disabled" data-toggle="toggle" data-size="small" data-onlabel="Done" data-offlabel="Pending" data-onstyle="success"
data-offstyle="warning" onchange="updateStatus(50)" disabled>
</td>
</tr>
</tbody>
</table>
Solution
Use $(this).closest('tr')
to get the row that the event target is in. Then you can find the checkboxes and toggle button in the same row.
$(document).on("change keyup", ".required", function() {
let row = $(this).closest("tr");
let disabled = row.find(".required:not(:checked)").length > 0;
row.find(".toggle-disabled").prop("disabled", disabled);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="MyTable" class="table table-responsive table-hover table-striped table-bordered border-primary table-sm align-middle" style="width:100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gmail</th>
<th>Pika</th>
<th style="text-align: center">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Brahim </td>
<td>Ameskroud</td>
<td>
<input class="form-check-input filled-in box required" type="checkbox" data-toggle="toggle" data-size="xs" data-onlabel="Yes" data-offlabel="No" data-onstyle="success" data-offstyle="info">
<label class="form-check-label">No</label>
</td>
<td>
<input class="form-check-input filled-in box required" type="checkbox" data-toggle="toggle" data-size="xs" data-onlabel="Yes" data-offlabel="No" data-onstyle="success" data-offstyle="info">
<label class="form-check-label">Yes</label>
</td>
<!-- Toggle button -->
<td style="text-align: center">
<input type="checkbox" name="status" class="toggle-disabled" data-toggle="toggle" data-size="small" data-onlabel="Done" data-offlabel="Pending" data-onstyle="success" data-offstyle="warning" checked disabled>
</td>
<tr>
<td>Bel Air</td>
<td>John Baptist</td>
<td>
<input class="form-check-input filled-in box required" type="checkbox" data-toggle="toggle" data-size="xs" data-onlabel="Yes" data-offlabel="No" data-onstyle="success" data-offstyle="info">
<label class="form-check-label">Yes</label>
</td>
<td>
<input class="form-check-input filled-in box required" type="checkbox" data-toggle="toggle" data-size="xs" data-onlabel="Yes" data-offlabel="No" data-onstyle="success" data-offstyle="info">
<label class="form-check-label">Yes</label>
</td>
<!-- Toggle button -->
<td style="text-align: center">
<input type="checkbox" name="status" class="toggle-disabled" data-toggle="toggle" data-size="small" data-onlabel="Done" data-offlabel="Pending" data-onstyle="success" data-offstyle="warning" disabled>
</td>
</tr>
</tbody>
</table>
Answered By - Barmar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.