[英]Checkbox: Enable button if checkbox checked
在我的頁面中有一個模態窗口,在模態中我有 2 個復選框,我希望是否所有復選框都被選中啟用發送按鈕並更改背景顏色(如果禁用的 bgcolor 為灰色,否則 bgcolor 為紅色)。 我怎么能以正確的方式?
HTML:
<form action="" method="POST" class="send-modal-data">
<input type="text" id="send_email" name="subscribe-email" class="modal-input" placeholder="Email *" required="required">
<div class="checkboks custom-sq vdc-cb-area">
<input type="checkbox" id="box4" name="vdc-modal-cb" class="checked-checkbox"/>
<label for="box4" class="checkboks-text d-flex align-center"><?php echo the_field('vdc_checkbox_txt', 'option'); ?></label>
</div>
<div class="checkboks custom-sq vdc-cb-area">
<input type="checkbox" id="box7" name="vdc-modal-cb" class="checked-checkbox" />
<label for="box7" class="checkboks-text d-flex align-center"><?php echo the_field('vdc_checkbox_text_2', 'option'); ?></label>
</div>
<div class="success-msg">
<div class="msg"></div>
</div>
<input type="submit" name="subscribe-form" id="vdc-send-modal" class="danger-btn send-subscribe" disabled="disabled" value="<?php echo the_field('lets_get_started', 'option'); ?>"></input>
</form>
JS:
var checks = document.getElementsByName('vdc-modal-cb');
var checkBoxList = document.getElementById('vdc-cb-area');
var sendbtn = document.getElementById('vdc-send-modal');
function allTrue(nodeList) {
for (var i = 0; i < nodeList.length; i++) {
if (nodeList[i].checked === false) return false;
}
return true;
}
checkBoxList.addEventListener('click', function(event) {
sendbtn.disabled = true;
if (allTrue(checks)) sendbtn.disabled = false;
console.log(123);
});
注意:我從堆棧溢出中獲取了這個示例,但它對我不起作用
1.您應該使用getElementsByClassName
來獲取具有相同類的元素。
2.要將 eventListener 添加到 class 元素,您應該遍歷元素。
var checks = document.getElementsByName('vdc-modal-cb');
var checkBoxList = document.getElementsByClassName('vdc-cb-area');
var sendbtn = document.getElementById('vdc-send-modal');
function allTrue(nodeList) {
for (var i = 0; i < nodeList.length; i++) {
if (nodeList[i].checked === false) return false;
}
return true;
}
for (var i = 0; i < checkBoxList.length; i++) {
checkBoxList[i].addEventListener('click', function(event) {
sendbtn.disabled = true;
if (allTrue(checks)) sendbtn.disabled = false;
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.