I want to show a suitable button with if/else statement. For example, when none of the checkboxes are checked I want to display the disabled button, but when one or more checkboxes are checked I want to display another button.
Js
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
Html
<input type="checkbox" id="checkAll" style="margin-left:-10px" />
<input type="checkbox" style="margin-left:5px" />
<input type="checkbox" style="margin-left:5px" />
<div class="ml-2">
if(checked){
<button type="button" class="btn btn-danger ">Delete</button>
}else{
<button type="button" class="btn btn-outline-danger" disabled>Delete</button>
}
</div>
As long the button is right next to the other button you don't even need no javascript for that. Thats of course quite a simple approach and can easily be 'hacked' via the Inspector. But if you do it with Javascript it can be hacked as well.
.checkbox + .button {
opacity: 0.5;
pointer-events: none;
}
.checkbox:checked + .button {
display: none;
}
.checkbox + .button + .button2 {
display: none;
}
.checkbox:checked + .button + .button2 {
display: block;
}<input type="checkbox" class="checkbox">
<div class="button">Button 1</div>
<div class="button2">Button 2</div>When none of the checkboxes are checked I want to display the disabled button, but when 1 or more checkbox are checked I want to display another button.
You can include both buttons in the html with one hidden - then in your js show/hide them as appropriate.
A basic implementation would to check:
if ($("input:checkbox:checked").length == 0) {
then use .show() .hide() on each of the buttons as required.
This can be made more streamlined, eg using .toggle($("input:checkbox:checked").length == 0) but this is to show the explicit if/else as requested in the title.
$("#checkAll").change(function() {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
$("input:checkbox").change(function() {
if ($("input:checkbox:checked").length == 0) {
$(".ml-2>.btn-danger").hide();
$(".ml-2>.btn-outline-danger").show();
} else {
$(".ml-2>.btn-outline-danger").hide();
$(".ml-2>.btn-danger").show();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll" />
<input type="checkbox" />
<input type="checkbox" />
<div class="ml-2">
<button type="button" class="btn btn-danger " style='display:none;' >Delete</button>
<button type="button" class="btn btn-outline-danger" disabled>Delete (disabled)</button>
</div>If - as outlined - you want to have two buttons (rather than, say, one button where you change the classes and properties) you can:
checkboxes changescheckboxesElement.classList.add('show')Element.classList.remove('show')to show and hide the respective buttons.
Working Example:
// DECLARE VARIABLES
const btnDanger = document.querySelector('.btn-danger');
const btnOutlineDanger = document.querySelector('.btn-outline-danger');
const checkBoxes = document.querySelectorAll('input[type="checkbox"]');
// FUNCTION: REVIEW CHECKBOXES
const reviewCheckBoxes = () => {
let allUnchecked = true;
checkBoxes.forEach((checkBox) => {
if (checkBox.checked) {
allUnchecked = false;
}
});
if (allUnchecked === true) {
btnDanger.classList.remove('show');
btnOutlineDanger.classList.add('show');
}
else if (allUnchecked === false) {
btnDanger.classList.add('show');
btnOutlineDanger.classList.remove('show');
}
}
// ADD EVENT LISTENERS TO EACH OF THE CHECKBOXES
checkBoxes.forEach((checkBox) => {
checkBox.addEventListener('change', reviewCheckBoxes);
});input[type="checkbox"] {
margin-left: 10px;
}
.btn-danger,
.btn-outline-danger,
input[type="checkbox"]#checkAll {
margin-left: 10px;
}
.btn-danger,
.btn-outline-danger {
display: none;
}
.btn-danger.show,
.btn-outline-danger.show {
display: inline-block;
}<input type="checkbox" id="checkAll" />
<input type="checkbox" />
<input type="checkbox" />
<button type="button" class="btn btn-danger ">Delete</button>
<button type="button" class="btn btn-outline-danger show" disabled>Delete</button>