Кнопка отключения, если один из флажков не установлен

ProgramBox

Кнопка отключения, если один из флажков не установлен

Post author:admin
Запись опубликована:9 января, 2022
Post category:Вопросы по программированию

#javascript #html #jquery #angularjs

Вопрос:

У меня есть два флажка в 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 amp;amp; 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>

1. вместо того, чтобы пытаться найти и изменить элементы dom — вы должны привязать атрибут disabled к данным и обновить данные, когда кнопка должна быть отключена и когда она должна быть включена.

2. «но если я проверю оба, это не включит кнопку» — это хорошо, не так ли? Потому что вы прямо сказали, что не хотите этого. ( «Примечание: я не хочу включать его, если отмечены оба параметра» )

3. Я открыт для любых советов, я выбираю изменение DOM, потому что это казалось самым простым решением.

4. CBroe, я отредактирую текст и сделаю его более понятным.

5. вы сказали, что я не хочу включать его, если оба флажка установлены, и как я могу включить кнопку, только если оба флажка установлены, что это такое?

Ответ №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 having 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>

Если вы все еще хотите использовать только 2 элемента, выбрав их с помощью идентификатора, вы можете выбрать их с помощью идентификаторов. Как document.querySelector('input[id="document-checkboxid"]') и document.querySelector('input[id="accepttermsandcond-checkbox"]') и привязать к ним событие изменения. Внутри события изменения проверьте, проверяются ли оба параметра внутри функции изменения.

Рабочая Скрипка

 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 amp;amp; 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>

1. Спасибо вам за вашу помощь! Могу я спросить, как я мог бы изменить его, если есть несколько флажков, но мне нужна эта функциональность только для этих двух кнопок?

2. @Norbs, пожалуйста, проверьте обновленный ответ

Ответ №2:

ПРАВКА № 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>Tamp;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>

1. Мне все еще очень нравится этот ответ, потому что я не знал, что что-то подобное возможно с помощью чистого css 😀

2. Мне очень нравится это решение. Если я хорошо понимаю, это влияет на все типы ввода в файле. Я работаю в более крупном проекте со множеством полей ввода и кнопок. Можно ли изменить его, чтобы он влиял только на эти две галочки и эту одну кнопку?

3. @Norbs Я обновил ответ, чтобы удовлетворить ваши потребности также для обязательного/дополнительного обследования

4. Еще один вопрос: Что, если у меня больше кнопок, но я хочу, чтобы эта функция » CSS` была только на этой одной кнопке? Например, у меня есть три кнопки, но я хочу только отключить свою startusing-button

5. @Norbs — используйте для этого классы / идентификаторы. Вы можете точно настроить селекторы css с их помощью

Ответ №3:

Если я правильно вас понял, вы хотите, чтобы кнопка была включена только тогда, когда установлены оба флажка, верно? Если да, то вы могли бы попробовать что-то вроде этого:

 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, потому что это гораздо более простой и общий подход!

Ответ №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:

попробуйте это,

я добавляю значение «отключено» к кнопке и создаю два метода onclick, чтобы получить статус .проверено, и если оба значения верны, измените параметр кнопки «отключено=истина» на «отключено=ложь».

 <!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 amp;amp; ebpAcceptTermsandCondCheckbox == true) { 
              document.getElementById('button').disabled = false;
              
            }
            else {
                document.getElementById('button').disabled = true;

            }
}
            
</script>
</html>

Метки: если один из флажков не установлен, Кнопка отключения