Включить/отключить кнопку на основе принятия условий 2 флажка

Question

Я прошел через stackoverflow относительно кнопки включения/выключения условно и смог найти некоторую помощь, но НЕ ТОЧНО, что я искал.

Вместо 1 checkbox condition, у меня есть 2 checkbox условий. Поэтому, если эти два флажка не приняты, кнопка не должна быть включена.

Ниже мой HTML:

<input type="checkbox" id="f_agree" value="1" onchange="checked(this, 'f_agree2')"/> 
<input type="checkbox" id="f_agree2" value="1" onchange="checked('f_agree', this)"/> 

<button type="submit" disabled="disabled" id="acceptbtn">Continue</button> 

Ниже JavaScript:

function checked(element1, element2) { 
    var myLayer = document.getElementById('acceptbtn'); 

    if (element1.checked == true && element2.checked == true) { 
     myLayer.class = "submit"; 
     myLayer.disabled = ""; 
    } else { 
     myLayer.class = "button:disabled"; 
     myLayer.disabled = "disabled"; 
    }; 
} 

Я попытался, как и выше, но он не работает. Я не знаю, где я ошибаюсь.

Answer 1

не работает, потому что вы не удаляете этот атрибут.

function checked(element1, element2) { 
    var myLayer = document.getElementById('acceptbtn'); 

    if (element1.checked == true && element2.checked == true) { 
     myLayer.class = "submit"; 
     myLayer.removeAttribute("disabled"); 
    } else { 
     myLayer.class = "button:disabled"; 
     myLayer.setAttribute("disabled","disabled"); 
    }; 
} 

Update

1. использовать любое другое имя, то проверяется, как это, кажется, защищены и не работает.
2. вам также необходимо выполнить getElementById для элементов element1 и element2.

function checkedFunc(element1Id, element2Id) { 
 
    
 
    var myLayer = document.getElementById('acceptbtn'); 
 
    var element1 = document.getElementById(element1Id); 
 
    var element2 = document.getElementById(element2Id); 
 
    if (element1.checked == true && element2.checked == true) { 
 
     myLayer.class = "submit"; 
 
     myLayer.removeAttribute("disabled"); 
 
    } else { 
 
     myLayer.class = "button:disabled"; 
 
     myLayer.setAttribute("disabled","disabled"); 
 
    }; 
 
}

<input type="checkbox" id="f_agree" value="1" onchange="checkedFunc('f_agree', 'f_agree2')"/> 
 
<input type="checkbox" id="f_agree2" value="1" onchange="checkedFunc('f_agree','f_agree2')"/> 
 

 
<input type="button" value="check" id="acceptbtn" />

Answer 2

Вы можете попробовать следующий код

if (element1.checked == true && element2.checked == true) { 
    myLayer.class = "submit"; 
    myLayer.removeAttribute("disabled"); 
} else { 
    myLayer.class = "button:disabled"; 
    myLayer.setAttribute("disabled", "disabled"); 
}; 

Answer 3

С JQuery:

var btn; 
 

 
var changed = function() { 
 
    //get the length of non checked boxes 
 
    var disbl = $('input[id^=f_agree]:not(:checked)').length; 
 
    btn.prop('disabled', disbl);//disable if true, else enable 
 
}; 
 

 

 
$(function() { 
 
    btn = $('#acceptbtn'); 
 
    $('input[id^=f_agree]').on('change', changed).trigger('change'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input type="checkbox" id="f_agree" value="1" />1 
 
<input type="checkbox" id="f_agree2" value="1" />2 
 
<input type="button" id="acceptbtn" value="Submit" />

Answer 4

Проблема в том, что существует разница между строкой "f_agree" и узлом с id="f_agree".

Ваш код должен работать, как ожидается, с

checked(this, document.getObjectById('f_agree2')) 

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

function okSubmit() { 
    return (document.getElementById("f_agree").checked && 
      document.getElementById("f_agree2").checked); 
} 

Это гораздо проще для чтения/сохранения, а также весы лучше в случае, если вам нужно добавить больше условий позже. В onchange всех виджетов просто вызывают функцию, которая будет включать/отключать кнопку отправки в зависимости от условий.

Answer 5

Попробуйте

if (element1.checked == true && element2.checked == true) { 
    myLayer.class = "submit"; 
    myLayer.removeAttribute("disabled"); 
} else { 
    myLayer.class = "button:disabled"; 
    myLayer.setAttribute("disabled", "disabled"); 
}; 

Answer 6

Попробуйте приведенный ниже код -

var chk1 = document.getElementById('chk1'); 
 

 
chk1.addEventListener('click', checked, false); 
 

 
var chk2 = document.getElementById('chk2'); 
 

 
chk2.addEventListener('click', checked, false); 
 

 
function checked(){ 
 

 
if(chk1.checked && chk2.checked) { 
 
    document.getElementById('btn').removeAttribute('disabled'); 
 
} else { 
 
    document.getElementById('btn').setAttribute('disabled','disabled'); 
 
} 
 

 
}

<input type="checkbox" id="chk1" /> 
 
<input type="checkbox" id="chk2" /> 
 
<button id="btn" disabled >Button<button>

Я проверил это, и это работает! Надеюсь, это поможет вам ...