У нас есть три флажка, как Left, Right, Both. При выборе "Влево" и "Вправо" Оба должны быть отключены.
Однако при проверке справа и слева; флажок для обоих не отключается. (или) alert ('Hello 1') не срабатывает.
document.getElementById('Left').disabled = false;
var isLeft = document.getElementById('Left').checked;
document.getElementById('Right').disabled = false;
var isRight = document.getElementById('Right').checked;
document.getElementById('Both').disabled = false;
var isBoth = document.getElementById('Both').checked;
if (isLeft == true && isRight == true)
{
alert('Hello 1');
document.getElementById('Both').checked = false;
document.getElementById('Both').disabled = true;
}
Ниже приведен оригинальный код в файле JavaScript.
if ($("input:radio[name='Swelling']:checked").length > 0) {
var isChecked = document.getElementById("SwellingYes").checked;
if (isChecked === true)
{
document.getElementById('Left').disabled = false;
let isLeft = document.getElementById('Left').checked;
document.getElementById('Right').disabled = false;
let isRight = document.getElementById('Right').checked;
document.getElementById('Both').disabled = false;
let isBoth = document.getElementById('Both').checked;
if (isLeft && isRight) {
alert('Hello 1');
document.getElementById('Both').checked = false;
document.getElementById('Both').disabled = true;
}
if (isBoth) {
document.getElementById('Left').checked = false;
document.getElementById('Right').checked = false;
document.getElementById('Left').disabled = true;
document.getElementById('Right').disabled = true;
}
}
}
Вам нужно прослушать каждое событие change
флажка, а затем запустить свой код, например:
document.addEventListener('DOMContentLoaded', function () {
Array.prototype.slice.call(document.querySelectorAll('input[type="checkbox"]')).forEach(function (checkbox) {
checkbox.addEventListener('change', function () {
document.getElementById('Left').disabled = false;
var isLeft = document.getElementById('Left').checked;
document.getElementById('Right').disabled = false;
var isRight = document.getElementById('Right').checked;
document.getElementById('Both').disabled = false;
var isBoth = document.getElementById('Both').checked;
if (isLeft == true && isRight == true) {
alert('Hello 1');
document.getElementById('Both').checked = false;
document.getElementById('Both').disabled = true;
}
});
});
});
Left:
<input type="checkbox" id="Left" />
Right:
<input type="checkbox" id="Right" />
Both:
<input type="checkbox" id="Both" />
Если вы поддерживаете только современные браузеры, вы можете использовать здесь немного синтаксического сахара:
document.addEventListener('DOMContentLoaded', () => {
[...document.querySelectorAll('input[type="checkbox"]')].forEach((checkbox) => {
checkbox.addEventListener('change', () => {
document.getElementById('Left').disabled = false;
let isLeft = document.getElementById('Left').checked;
document.getElementById('Right').disabled = false;
let isRight = document.getElementById('Right').checked;
document.getElementById('Both').disabled = false;
let isBoth = document.getElementById('Both').checked;
if (isLeft == true && isRight == true) {
alert('Hello 1');
document.getElementById('Both').checked = false;
document.getElementById('Both').disabled = true;
}
});
});
});
Left:
<input type="checkbox" id="Left" />
Right:
<input type="checkbox" id="Right" />
Both:
<input type="checkbox" id="Both" />
Если вы хотите также отключить " Left
и " Right
, когда Both
были проверены, вы можете это сделать, кроме того, было бы разумно не запрашивать dom для ваших элементов и скорее хранить их внутри переменных:
document.addEventListener('DOMContentLoaded', () => {
let leftBox = document.getElementById('Left');
let rightBox = document.getElementById('Right');
let bothBox = document.getElementById('Both');
[...document.querySelectorAll('input[type="checkbox"]')].forEach((checkbox) => {
checkbox.addEventListener('change', () => {
leftBox.disabled = false;
let isLeft = leftBox.checked;
rightBox.disabled = false;
let isRight = rightBox.checked;
bothBox.disabled = false;
let isBoth = bothBox.checked;
if (isLeft && isRight) {
bothBox.checked = false;
bothBox.disabled = true;
}
if (isBoth) {
leftBox.checked = false;
rightBox.checked = false;
leftBox.disabled = true;
rightBox.disabled = true;
}
});
});
});
Left:
<input type="checkbox" id="Left" />
Right:
<input type="checkbox" id="Right" />
Both:
<input type="checkbox" id="Both" />
Я не уверен, что это комментарий или нет, но ваш код проверяет только, проверен ли он один раз или нет, при загрузке страницы. Если вы хотите, чтобы он работал правильно, вы можете захотеть связать событие или добавить цикл?