Question

我试图让底部的按钮无法选择，只有在您选择年龄组单选按钮时才可选择。我不确定为什么，但我认为函数'EnableButton'是无效的，因为如果我删除它，底部按钮变得无法选择，所以另一个函数'DisableButton'必须是正确的。

有人可以帮忙解释一下这个问题吗？

var disablebutton = document.getElementById("to-enable"); // global variable
function DisableButton() { // disables 'to-enable' button
	disablebutton.disabled = true;
}

DisableButton(); // runs the disable button function

function EnableButton() { // function that enables button
	var ValidateAge = document.forms["registration-form"]["age"].value;
	if (ValidateAge != undefined) {
		disablebutton.disabled = false;
	}
}

EnableButton(); // runs the enable button function

<form id="registration-form">
	<input type="text" name="forename"> Forename<br>
	<input type="text" name="surname"> Surname<br>
	<input type="text" name="email"> Email<br>
	<textarea name="address" rows="5" cols="40">Type your full address here...</textarea> Address<br><br>
    Which planets have you already seen through a telescope?<br>
    <input type="checkbox" name="planets" value="none">None<br>
    <input type="checkbox" name="planets" value="mercury">Mercury<br>
    <input type="checkbox" name="planets" value="venus">Venus<br>
    <input type="checkbox" name="planets" value="mars">Mars<br>
    <input type="checkbox" name="planets" value="jupiter">Jupiter<br>
    <input type="checkbox" name="planets" value="saturn">Saturn<br>
    <input type="checkbox" name="planets" value="usanus">Uranus<br>
    <input type="checkbox" name="planets" value="neptune">Neptune<br><br>
    What is your age group?<br>
    <input type="radio" name="age">Under 18<br>
    <input type="radio" name="age">18-30<br>
    <input type="radio" name="age">30-50<br>
    <input type="radio" name="age">50+<br><br>
    What country are you from?
    <select name="Country">
		<option value="not-selected">Not Selected</option>
		<option value="england">England</option>
		<option value="wales">Wales</option>
		<option value="scotland">Scotland</option>
		<option value="northern-ireland">Northern Ireland</option>
	</select>
    <br><br>
</form>

<button onClick="ResetForm()">Reset</button>
<button onClick="SubmitForm()" id="submit">Submit</button>
<button id="to-enable">Select an age group to activate this button</button>

Answer 1

问题是两个函数都是立即运行的。因此，当时未选择radio。因此它不会启用它。

您可以在广播中使用eventListener或interval。

eventListener是首选。

执行此操作的代码是

 document.querySelectorAll('input[name=age]').forEach(x => x.addEventListener('change',EnableButton));

Answer 2

点击添加div。

<强> HTML

What is your age group?<br>

<div div onclick="EnableButton()" id="under18">  

<input type="radio" name="age">Under 18<br>  

</div>
<input type="radio" name="age">18-30<br>
<input type="radio" name="age">30-50<br>
<input type="radio" name="age">50+<br><br>

<强> JS

function EnableButton() { // function that enables button
  disablebutton.disabled = false;
}

修改

你需要一个while循环：

<强> JS

i = 2 function EnableButton() { // function that enables button while (i<10) { disablebutton.disabled = false; }}

按钮应该是不可选择的，只有在选择无线电选项

2 个答案: