У меня есть сценарий, в котором я должен включить / отключить кнопку, основываясь на статусе флажков. Если флажок уже установлен и статус файла загружен / сохранен как черновик, тогда, если пользователь go и снимите его, все 3 кнопки должны быть включены, если он проверит, что флажок только загрузка на портал будет включен и сохранен как черновик и сброс будет отключен. Если весь статус - «Файл загружен», то все три кнопки будут отключены, если флажок не будет изменен.
Короче говоря, если какое-либо изменение произойдет с этими флажками, кнопки активируются, в противном случае они будут go возвращаться к своим предыдущее состояние.
let status = [];
$(document).ready(function() {
for (let i = 0; i < $("table tbody tr").length; i++) {
let tableStatus = $("table tbody tr:eq(" + [i] + ") td:eq(1)").text();
status.push(tableStatus);
status.join(",");
}
if (status.indexOf("Saved as Draft") > -1) {
$("#upload").prop('disabled', false);
$("#discard, #save").prop('disabled', true);
}
});
function doCheck(checkbox) {
let newCheckedStatus = [];
let nextVal = $(checkbox).parent().next().find(".docStatusCheck").val();
$(checkbox).attr('data-change', 'yes');
if ($(checkbox).is(':checked')) {
$(checkbox).val("yes");
$(checkbox).parent().next().text("Not Applicable");
$("#discard, #save, #upload").prop('disabled', false);
} else {
if (nextVal == undefined || nextVal == "") {
$(checkbox).val("");
} else {
$(checkbox).val("no");
}
$(checkbox).parent().next().text("File Not Selected ");
for (var i = 0; i < $("table tbody tr").length; i++) {
let newCheckedValue = $("table tbody tr:eq(" + [i] + ") td:eq(1)").text();
newCheckedStatus.push(newCheckedValue);
newCheckedStatus.join(",");
}
if (status.indexOf("Saved as Draft") > -1) {
$("#upload").prop('disabled', false);
$("#discard, #save").prop('disabled', true);
} else if (newCheckedStatus.indexOf("Not Applicable") > -1) {
$("#discard, #save, #upload").prop('disabled', false);
} else {
$("#discard, #save, #upload").prop('disabled', true);
}
}
}
function doUncheck(checkmark) {
let newCheckedStatus = [];
$(checkmark).attr('data-change', 'yes');
if ($(checkmark).is(':checked')) {
$(checkmark).val("yes");
for (var i = 0; i < $("table tbody tr").length; i++) {
let newCheckedValue = $("table tbody tr:eq(" + [i] + ") td:eq(2)").text();
newCheckedStatus.push(newCheckedValue);
newCheckedStatus.join(",");
}
if (status.indexOf("Saved as Draft") > -1) {
$("#upload").prop('disabled', false);
$("#discard, #save").prop('disabled', true);
} else if (newCheckedStatus.indexOf("Not Applicable") > -1) {
$("#discard, #save, #upload").prop('disabled', false);
} else {
$("#discard, #save, #upload").prop('disabled', true);
}
$(checkmark).parent().next().find(".prevStatus").text("Not Applicable");
} else {
$(checkmark).next().val("no");
$(checkmark).val("no");
$("#discard, #save, #upload").prop('disabled', false);
$(checkmark).parent().next().text("File Not Selected ");
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table border=1>
<thead><tr><td></td><td>Status</td></tr></thead>
<tbody>
<tr>
<td><input type="Checkbox" onclick="doUncheck(this)" checked value="yes"></td>
<td>File uploaded</td>
</tr>
<tr>
<td><input type="Checkbox" checked value="yes" onclick="doUncheck(this)"></td>
<td>File uploaded</td>
</tr>
<tr>
<td><input type="Checkbox" onclick="doCheck(this)" value=""></td>
<td>File not Selected</td>
</tr>
<tr>
<td><input type="Checkbox" onclick="doUncheck(this)" checked value="yes"></td>
<td>Saved as Draft</td>
</tr>
<tr>
<td><input type="Checkbox" onclick="doUncheck(this)" checked value="yes"></td>
<td>File uploaded</td>
</tr>
<tr>
<td><input type="Checkbox" onclick="doUncheck(this)" checked value="yes"></td>
<td>File uploaded</td>
</tr>
</tbody>
</table>
<button id="discard">
Discard
</button>
<button id="save">
Save as Draft
</button>
<button id="upload">
Upload
</button>
</div>
Вот скрипка