I created function where I block all my inputs( I did it with for of loop). Now I would like to add condition if button checked unblock, if not checked block.
I wrote following code:
<div class="container">
<input type="number" class="block">
<input type="text" class="block">
<input type="email" class="block">
<input type="checkbox" id="scale1" name="scales">
<label for="scales">Scales</label>
</div>
function blockFileds() {
let inputsForm = document.getElementsByClassName('block');
let checker = document.getElementById('scale1');
for (const singleField of inputsForm) {
if (checker.checked) {
singleField.disabled = false;
} else {
singleField.disabled = true;
}
}
}
blockFileds()
input are blocked, but I cant' unblock it.
this way...
const
inputsForm = document.querySelectorAll('input.block')
, checker = document.querySelector('#scale1')
;
blockFileds()
checker.onclick = blockFileds
function blockFileds()
{
inputsForm.forEach( singleField =>
{
singleField.disabled = !checker.checked
})
}.block, label {
display : block;
margin : .3em 0;
}<div class="container">
<input type="number" class="block">
<input type="text" class="block">
<input type="email" class="block">
<label>
<input type="checkbox" id="scale1" name="scales">
Scales
</label>
</div>Remove the elements from the function, And attach addEventListener to the input
let inputsForm = document.getElementsByClassName('block');
let checker = document.getElementById('scale1');
function blockFileds() {
for (let singleField of inputsForm) {
if (checker.checked) {
singleField.disabled = false;
} else {
singleField.disabled = true;
}
}
}
blockFileds()
checker.addEventListener("click", (e)=>{
blockFileds()
})