如果未選中復選框之一，則禁用按鈕-有解無憂

我有兩個復選框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>

uj5u.com熱心網友回復：

編輯#2：根據評論中的要求，我更新了答案以涵蓋必需和可選復選框。

編輯：剛剛注意到它仍然可以通過鍵盤選項卡焦點訪問并觸發事件。所以不是一個完美的解決方案，請注意這一點。

這可以用普通的 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>

uj5u.com熱心網友回復：

您必須觸發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具有 value 的輸入元素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 個元素，則可以使用 ids 選擇它們。喜歡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>

uj5u.com熱心網友回復：

如果我理解你的正確，你希望按鈕只在兩個復選框都被選中時啟用，對嗎？如果是這樣，你可以嘗試這樣的事情：

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 答案，因為它是一種更簡單和通用的方法！

uj5u.com熱心網友回復：

試試這個代碼，更簡單易讀（我希望）。

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

uj5u.com熱心網友回復：

嘗試這個，

我將值“禁用”添加到按鈕并創建兩個 onclick 方法來獲取 .checked 狀態，如果兩者都為真，則將按鈕引數“禁用=真”更改為“禁用=假”

<!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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/312569.html

標籤：javascript html 查询 angularjs

上一篇：如何使用工廠函式回傳$http.post()物件？

下一篇：如何在AngularJS中生成組件的模板標簽