Javascript单选按钮功能错误

Question

我试着从我的表单做一些单选按钮的事情，我有很多麻烦。现在有两个单选按钮，可以一起工作。我想为我的表单有三个场景。

1. 两个单选按钮都没有选中，隐藏或禁用2个其他元素。(文本框和下拉列表)
2. 选中第一个单选按钮，隐藏或禁用1个元素。
3. 选中第二个单选按钮，隐藏或禁用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

看起来问题是你正在使用文档。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