0

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

  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;
    }
}

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

无论如何，对此事的任何帮助将不胜感激。

4

2 回答 2

2

看起来问题是您正在使用 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 />
于 2013-04-19T22:35:09.297 回答
1

用这个...

<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;
    }
}

看这个演示

于 2013-04-19T22:40:03.567 回答