javascript - 表单验证器检查选项并选择检查不起作用

Question

我对此脚本有疑问，我需要底部编程的表单验证器首先检查带有选择的 radio 是否是目标，然后才从该特定 radio 下拉列表中请求时间。如果我能得到:

if (document.getElementById('first').checked) {
    frmvalidator.addValidation("selects", "dontselect=000", "select a time");
}

声明在javascript中工作，但因为它只寻找真实的时间，但我似乎遗漏了一些东西。请帮忙

<form method="POST" name="contactform" id="contactform" action="contact-form-handler.php">
  <div>
    <div style="float:left; width:420px;";>
      <input type="radio" name="radios" id="first" value="SELECT" /> Attending a GROUP Intro      to Meditation ($15) on: <br/>
      <select name="selects"id="selects">
        <option value="000">Select a Date</option>
        <option value="2">April 23rd, TUES at 7:00PM - Group Intro to Meditation</option>
        <option value="3">April 27th, SAT at 11:00AM - Group Intro to Meditation</option>
        <option value="4">May 1st, WED at 7:00PM - Group Intro to Meditation</option>
        <option value="5">May 7th, TUES at 7:00PM - Group Intro to Meditation</option>
  </select>
      <br>
      <input type="radio" name="radios" value="radio1" /> Scheduling a PRIVATE Intro to    Meditation ($200) <br/>
      <input type="radio" name="radios" value="radio2" /> Scheduling an Individual Consultation ($300 / $475) <br/>
      <input type="radio" name="radios" value="radio3" /> GIFT a Mentoring Session - 2 hr ($350) <br>
      <input type="radio" name="radios" value="radio4" /> Corporate Programs <br/>
      <input type="radio" name="radios" value="radio5" /> Pro Bono Programs <br/>
      <input type="radio" name="radios" value="radio6" /> General Inquiry <br/>
      <input type="radio" name="radios" value="radio7" /> Receiving Information on Future      Intro Dates<br/>
    </div>
    <div style="float:left";>
      <label for='name'>Your Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <input type="text" name="name"> <br>
      <label for='email'>Email Address:&nbsp;</label>
      <input type="text" name="email"> <br>
      <label for='confirm_email'>Confirm Email:</label>
      <input type="text" name="confirm_email"> <br>
      <label for='email'>Contact #:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <input type="text" name="contact"> <br>
      <label for='message'>Message:</label> <br>
      <textarea rows="8" cols="35" name="message";></textarea>
      <input type="submit" value="Submit"><br>
    </form>
  </div>
</div>
</td>
<tr>
  <td>
    <script language="JavaScript">
      // Code for validating the form
      // Visit http://www.javascript-coder.com/html-form/javascript-form-validation.phtml

      // for details
      var frmvalidator  = new Validator("contactform");
      frmvalidator.addValidation("name","req","Please provide your name"); 
      frmvalidator.addValidation("email","req","Please provide your email"); 
      frmvalidator.addValidation("email","email","Please enter a valid email address"); 

      //frmvalidator.addValidation("selects","dontselect=000","select a time");
      var chktestValidator = new Validator("contactform"); 

      //chktestValidator.addValidation("radios","selectradio","Please select an option"); 
      chktestValidator.addValidation("radios","selone", "Please select a plan");

      if(document.getElementById('first').checked) {
        frmvalidator.addValidation("selects","dontselect=000","select a time");
      }
  </script>

Answer 1

在我看来，您真正想要的是 id“first”的单选按钮上的监听器，当选中该按钮时，根据按钮是否被选中来启用或禁用相邻的选择元素。您可以通过以下方式做到这一点:

<input type="radio" ... onclick="this.form.selects.disabled = !this.checked;">

当页面通过脚本加载时，您应该禁用 select 元素，而不是在 HTML 中。

在 select 元素中，您应该将 HTML 中的第一个选项设置为选中:

  <option value="000" selected>Select a Date</option>