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

【问题标题】：Disable button if one of the checkboxes are not checked如果未选中其中一个复选框，则禁用按钮
【发布时间】：2021-11-22 05:45:10
【问题描述】：

我在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>

【问题讨论】：

而不是尝试查找和修改 dom 元素 - 您应该将 disabled 属性绑定到数据，并在应该禁用按钮以及何时启用按钮时更新数据。
“但如果我同时检查两者，它不会启用按钮” - 那很好，不是吗？因为您明确表示您确实不想要那样。 ("注意：如果两者都被选中，我不想启用它")
我愿意接受任何建议，我选择修改 DOM，因为这似乎是最简单的解决方案。
CBroe，我要编辑文本，让它更清晰。
你说过如果两者都被选中，我不想启用它和我怎样才能使按钮只有在两个复选框都被启用时才启用已检查是哪个？

标签： javascript html jquery angularjs

【解决方案1】：

你必须触发change的复选框。

只需检查两个复选框是否已选中，仅适用于加载文档。每次更改复选框状态时，您都必须重复此过程。

我稍微修改了你的脚本。

逻辑

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

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>

编辑：

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

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

工作小提琴

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 个元素，则可以使用 id 选择它们。喜欢document.querySelector('input[id="document-checkboxid"]') 和document.querySelector('input[id="accepttermsandcond-checkbox"]') 并将更改事件绑定到它们。在 change 事件中，检查是否在 change 函数中都检查了两者。

工作小提琴

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>

【讨论】：

感谢您的帮助！请问如果有多个复选框但我只希望这两个按钮具有此功能，我该如何更改它？
@Norbs 请检查更新后的答案

【解决方案2】：

EDIT#2：我更新了答案以覆盖 required 和 optional 复选框，正如 cmets 中所要求的那样。

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

这可以用纯 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>

【讨论】：

我仍然非常喜欢这个答案，因为我不知道纯 css 可以做到这样的事情：D
我真的很喜欢这个解决方案。如果我理解得很好，它会影响文件中的每个输入类型。我在一个更大的项目中工作，有许多输入字段和按钮。是否可以将其更改为仅影响这两个复选标记和一个按钮？
@Norbs 我更新了答案以满足您对必需/可选检查的需求
还有一个问题：如果我有更多按钮，但我只想在这一个按钮上使用这个 `CSS` 功能怎么办？例如，我有三个按钮，但我只想禁用我的startusing-button
@Norbs - 为此使用类/ID。您可以使用它们精确定位 css 选择器

【解决方案3】：

试试这个，

我将值“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>

【讨论】：

【解决方案4】：

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

(()=>{
    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>

【讨论】：

【解决方案5】：

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

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 答案，因为它是一种更简单且通用的方法！

【讨论】：