如果未选中其中一个复选框，则禁用按钮

Question

我在 HTML 中有两个名为 accepttermsandcond-checkbox 和 accepttermsandcond-checkbox 的复选框，我制作了一个名为 startusing-button

的按钮

如果未选中其中一个复选框，我希望 startusing-button 保持禁用状态。

问题是它一开始就禁用了它，但如果我同时选中这两个，它就不会启用该按钮。

注意：即使我在代码中添加document.getElementById('startusing-button').disabled = false;也没有解决问题

如何才能使按钮仅在两个复选框都被选中时才启用？

编辑：我忘了说我有很多复选框和按钮。如果解决方案只影响这两个复选框和一个按钮，而其余的复选框和按钮不受影响，那将是理想的。

    var ebpDocumentCheckboxid = document.getElementById('document-checkboxid');
    var ebpAcceptTermsandCondCheckbox =document.getElementById('accepttermsandcond-checkbox');

            if (ebpDocumentCheckboxid.checked && ebpAcceptTermsandCondCheckbox.checked) { 
              
            }
            else {
                document.getElementById('startusing-button').disabled = true;

            }

<input type="checkbox" id="document-checkboxid"/>
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox"/>


<button type="button" id="startusing-button">CreateSubscription</button>

Answer 1

如果我理解你是对的，你希望按钮仅在两个复选框都被选中时才启用，对吧？如果是这样，你可以尝试这样的事情：

var ebpDocumentCheckboxid = document.getElementById("document-checkboxid");
var ebpAcceptTermsandCondCheckbox = document.getElementById(
  "accepttermsandcond-checkbox"
);
var btn = document.getElementById("startusing-button");

const onCheckboxChanged = ()=>{
  btn.disabled = (!ebpDocumentCheckboxid.checked) || (!ebpAcceptTermsandCondCheckbox.checked);
}

ebpDocumentCheckboxid.onchange = onCheckboxChanged;
ebpAcceptTermsandCondCheckbox.onchange = onCheckboxChanged;

我还向按钮添加了 disabled="true"，因此它从一开始就被禁用了。

这是一个工作示例的代码笔：https://codepen.io/jonas_weinhardt/pen/QWgoGzL?editors=1010

编辑：

您可能应该使用 Nitheesh 答案，因为它是一种更简单和通用的方法！

Answer 2

您必须触发 change 个复选框。

简单地检查两个复选框是否已选中，将仅在加载文档时起作用。每次更改复选框状态时都必须重复此过程。

我已经稍微修改了你的脚本。

逻辑

Select 所有使用 document.querySelectorAll('input[type="checkbox"]') 的复选框。
使用 forEach 循环此列表，在复选框上添加更改事件。
在更改事件中，找到 selected 复选框的计数。
如果匹配总复选框的长度，启用按钮，或禁用它。

const checkBoxes = document.querySelectorAll('input[type="checkbox"]');
const submitButton = document.getElementById('startusing-button');
checkBoxes.forEach((cb) => {
  cb.addEventListener('change', checkButtonStatus);
});
function checkButtonStatus() {
  const checkedCount = [...checkBoxes].filter((cb) => cb.checked);
  submitButton.disabled = checkedCount.length !== checkBoxes.length
}
checkButtonStatus();

<input type="checkbox" id="document-checkboxid" />
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" />

<button type="button" id="startusing-button">CreateSubscription</button>

编辑：

如果您只想 select 这两个复选框，您可以通过多种方式处理。您可以使用具有某些唯一值的自定义属性。在下面的示例中，我使用 identifier="my-custom-identifier" 并使用 document.querySelectorAll('input[identifier="my-custom-identifier"]') 输入 selection。这将检查所有具有 identifier 值 my-custom-identifier.

的输入元素

为什么我使用这种方法是为了使您的解决方案更通用一些。您只需在要包含此检查的所有输入中使用 identifier="my-custom-identifier"。

工作Fiddle

const checkBoxes = document.querySelectorAll('input[identifier="my-custom-identifier"]');
const submitButton = document.getElementById('startusing-button');
checkBoxes.forEach((cb) => {
  cb.addEventListener('change', checkButtonStatus);
});
function checkButtonStatus() {
  const checkedCount = [...checkBoxes].filter((cb) => cb.checked);
  submitButton.disabled = checkedCount.length !== checkBoxes.length
}
checkButtonStatus();

<input type="checkbox" id="document-checkboxid" identifier="my-custom-identifier" />
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" identifier="my-custom-identifier" />
<button type="button" id="startusing-button">CreateSubscription</button>

如果您仍想通过使用 id 选择它们来仅使用 2 个元素，您可以 select 使用 id。喜欢 document.querySelector('input[id="document-checkboxid"]') 和 document.querySelector('input[id="accepttermsandcond-checkbox"]') 并将更改事件绑定到它们。在 change 事件中，检查是否在 change 函数中检查了两者。

工作Fiddle

const checkBox1 = document.querySelector('input[id="document-checkboxid"]');
const checkBox2 = document.querySelector('input[id="accepttermsandcond-checkbox"]');
const submitButton = document.getElementById('startusing-button');

checkBox1.addEventListener('change', checkButtonStatus);
checkBox2.addEventListener('change', checkButtonStatus);

function checkButtonStatus() {
  const allChecked = checkBox1.checked && checkBox2.checked;
  submitButton.disabled = !allChecked;
}
checkButtonStatus();

<input type="checkbox" id="document-checkboxid" />
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" />
<button type="button" id="startusing-button">CreateSubscription</button>

Answer 3

试试这个代码，更简单易读（我希望）。

(()=>{
    let checkboxes = [
        document.querySelector('#document-checkboxid'),
        document.querySelector('#accepttermsandcond-checkbox')
    ];
    let button = document.querySelector('#startusing-button');

    for(let checkbox of checkboxes) {
        checkbox.addEventListener('click', changeStatus); // changeStatus function onclick
    }

    changeStatus(); // run changeStatus function automatically

    function changeStatus(){
        if(checkboxes.every(checkbox => checkbox.checked)) button.removeAttribute('disabled');
        else button.setAttribute('disabled', 'true');
    }
})();

<input type="checkbox" id="document-checkboxid"/>
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox"/>


<button type="button" id="startusing-button">CreateSubscription</button>

Answer 4

EDIT#2: 我更新了答案以涵盖 required 和 optional 复选框，按照评论中的要求。

编辑： 刚刚注意到它仍然可以通过键盘选项卡焦点访问并触发事件。所以这不是一个完美的解决方案，请注意这一点。

这可以用简单的方式完成 CSS:

button {
  padding: 10px;
}

input[required]:not(:checked) ~ button {
  background-color: #b0b0b0;
  color: #d0d0d0;
  border: 1px outset #808080;
  pointer-events: none;
}

<form>
  <label>ID:</label>
  <input type="checkbox" id="document-checkboxid" required />
  <label>T&amp;C</label>
  <input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" required />
  <hr />
  <label>Something irrelevant:</label><input type="checkbox" name="optional_one" id="something" />
  <label>Also optional:</label><input type="checkbox" name="optional_two" id="something else" />
  <hr />
  <button type="submit" id="startusing-button">CreateSubscription</button>
</form>

Answer 5

试试这个，

我将值“disabled”添加到按钮并创建两个 onclick 方法来获取 .checked 状态，如果两者都是 true，则将按钮参数“disabled=true”更改为“disabled=false”

<!DOCTYPE html>

<head>
</head>

<body>
  
<div id = "test">
<input type="checkbox" id="document-checkboxid" onclick="firstchb()"/>
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" onclick="secondchb()"/>


<button type="button" id="button" disabled >CreateSubscription</button>
  
</div>

</body>
<script>

let ebpDocumentCheckboxid = null;
let ebpAcceptTermsandCondCheckbox = null;
function firstchb(){
ebpDocumentCheckboxid = document.getElementById('document-checkboxid').checked;
enableit();
}

function secondchb(){
ebpAcceptTermsandCondCheckbox = document.getElementById('accepttermsandcond-checkbox').checked;

enableit();
}
function enableit(){
  if (ebpDocumentCheckboxid == true && ebpAcceptTermsandCondCheckbox == true) { 
              document.getElementById('button').disabled = false;
              
            }
            else {
                document.getElementById('button').disabled = true;

            }
}
            
</script>
</html>

如果未选中其中一个复选框，则禁用按钮

Disable button if one of the checkboxes are not checked

javascript

html

jquery

angularjs