Question

我尝试用我的表格中的一些单选按钮做一些事情，我遇到了很多麻烦。现在有两个单选按钮，可以一起工作。我想为我的表单设置3个场景。

未选中任何单选按钮，隐藏或禁用其他2个元素。（文本框和下拉列表）
选中第一个单选按钮，隐藏或禁用1个元素。
选中第二个单选按钮，隐藏或禁用1个元素。

在所有3个场景中，我需要我的表单来返回用户的值，无论是什么，还是单选按钮检查以及该单选按钮可用的元素。另外请记住，表单将包含稍后将与其分开的其他单选按钮。我还想提一下，如果可能，我希望将其保留在纯JavaScript中。

目前我正在尝试使用.disable和.checked，但没有运气。谁能帮我解决这个问题。如果可能的话，请包括你的答案的解释，以便我能理解。

这是我的表单代码：

<input type="radio" name="clubMember" id="member" value="Member" />Club Member 
<input type="radio" name="clubMember" id="nonmember"value="nonMember" />Non Member <br /> <br />

Select your Club.
<select name="clubList">
<option value="clubA">Club A</option> 
<option value="clubB">Club H</option>
</select><br />

<!-- OR -->
Are you from another club, or a guest? <br />
<textarea rows="5" cols="25" name="nonClubInfo">Briefly explain here </textarea>

<button type="submit" onclick="return validateRegistrationForm()" >Register</button>

以下是我的脚本的代码：

function validateClubInfo()
{
    if(document.getElementById("member").checked == false && document.getElementById("nonMember").checked == false)
    {
        document.getElementById("clubList").disabled = true;
        document.getElementById("nonClubInfo").disabled = true;
        alert("this is a test");
        return true;
    }
    else if(document.getElementById("member").checked == true)
    {
        document.getElementById("nonClubInfo").disabled = true;
        return true
    }
    else if(document.getElementById("nonMember").checked == true)
    {
        document.getElementById("clubList").disabled = true;
        return true;
    }
}

我还应该注意通过第二个函数检查验证，我把它遗漏了，因为它是一个非常长的函数，它与这个问题无关。

无论如何，我们将非常感谢您对此事的任何帮助。

Answer 1

看起来问题是你正在使用document.getElementById来查找select / textarea，但是你还没有为这些元素分配id。尝试为这样的人添加ID：

<select name="clubList" id="clubList>
    <option value="clubA">Club A</option> 
    <option value="clubB">Club H</option>
</select><br />

Answer 2

使用此...

<input type="radio" name="clubMember" id="member" value="Member" />Club Member 
<input type="radio" name="clubMember" id="nonmember"value="nonMember" />Non Member <br /> <br />

Select your Club.
<select name="clubList" id="clubList">
<option value="clubA">Club A</option> 
<option value="clubB">Club H</option>
</select><br />

<!-- OR -->
Are you from another club, or a guest? <br />
<textarea rows="5" cols="25" name="nonClubInfo" id="nonClubInfo">Briefly explain here </textarea>

<input type="button" onclick="validateRegistrationForm();" value="Register"/>

js：

function validateRegistrationForm() {
    if(document.getElementById("member").checked == false && document.getElementById("nonmember").checked == false)
    {
        document.getElementById("clubList").disabled = true;
        document.getElementById("nonClubInfo").disabled = true;
        alert("this is a test");
        return true;
    }
    else if(document.getElementById("member").checked)
    {
        alert(document.getElementById("member").checked);
        document.getElementById("nonClubInfo").disabled = true;
        return true
    }
    else if(document.getElementById("nonmember").checked == true)
    {
        alert(document.getElementById("member").checked);
        document.getElementByName("clubList").disabled = true;
        return true;
    }
}

请参阅 DEMO

Javascript Radio Buttons功能错误

2 个答案: