0

我有十多个关于单选按钮的问题。在用户可以进入另一个级别之前，它们都需要设置为 true。当且仅当这十个问题的答案都属实时，我希望启用表单上的其中一个元素以进行进一步编辑。这个，我可以在服务器端做，但不知道如何在 JavaScript 中做。有什么帮助吗？非常感激。谢谢。

<div>
<label> First Question:</label>
<label>
<input checked="checked" class="radio_buttons optional pull-right allowed" id="is_complete_and_works_true" name="project[person_attributes][is_complete_and_works]" type="radio" value="true" />Yes</label>

<label >
<input class="radio_buttons optional pull-right allowed" id="is_complete_and_works_false" name="project[person_attributes][is_complete_and_works]" type="radio" value="false" />No</label>
</div>

<div>
<label> Second Question:</label>
<label>
<input checked="checked" class="radio_buttons optional pull-right allowed" id="is_complete_and_works_true" name="project[person_attributes][researched]" type="radio" value="true" />Yes</label>

<label >
<input class="radio_buttons optional pull-right allowed" id="is_complete_and_works_false" name="project[person_attributes][researched]" type="radio" value="false" />No</label>
</div>
<div>
<label> Third Question:</label>
<label>
<input checked="checked" class="radio_buttons optional pull-right allowed" id="is_complete_and_works_true" name="project[person_attributes][is_complete_and_works]" type="radio" value="true" />Yes</label>

<label >
<input class="radio_buttons optional pull-right allowed" id="is_complete_and_works_false" name="project[person_attributes][is_complete_and_works]" type="radio" value="false" />No</label>
</div>

此代码扩展到更多问题。

我已经能够通过这样做来选择收音机：

var first_ten = $(':radio[name="project[person_attributes][is_complete_and_works]"][value=true], :radio[name="project[person_attributes][researched]"][value=true], etc…);

现在，我不知道如何迭代每一个，当我单击每个单选时，无论是或否，我都希望看到要启用的元素的结果。任何想法都非常感谢。

4

1 回答 1

1

像下面这样的东西可以完成这项工作：

<script type="text/javascript">

function proceed(form) {
  var el, els = form.getElementsByTagName('input');
  var i = els.length;
  while (i--) {
    el = els[i];

    if (el.type == 'checkbox' && !el.checked) {
      form.proceedButton.disabled = true;
      return; 
     }
  }
  form.proceedButton.disabled = false;
}

</script>

<form onclick="proceed(this);">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="submit" name="proceedButton" disabled>
</form>

请注意，这被认为是糟糕的设计，就好像 javascript 不可用或未启用一样，用户永远无法单击该按钮。最好以有用的状态交付表单，并在提交时使用脚本来验证按钮是否全部被选中，如果没有，则取消提交。

然后在服务器上，您还可以检查状态，如果当前通过验证，则仅显示下一页。如果没有，则将用户返回到第一页。

这样，您或用户都不关心脚本是否有效，页面仍然有效。当然，如果脚本确实可以工作，这可能是更好的体验，但至少选择不是二进制的，而且它还为您提供了一个简单的回退，以最小的努力支持非常广泛的浏览器。

所以更好的解决方案是：

<form onsubmit="reurn validate(this);" ...>
  ...
</form>

然后在函数中：

function validate(form) {
  // if validateion fails, show an appropriate message and return false,
  // if it passes, return undefined or true.
}

并且始终在服务器上进行验证，因为您真的不知道客户端上发生了什么。

编辑

表单控件不需要名称和 ID，只需使用名称即可。在单选按钮集中，只能选中一个控件，不能全部选中。

在我看来，您要做的是查看每组中是否至少检查了一个单选按钮。您可以根据上面的代码执行此操作，并在遇到它时选择每个集合，例如

function validateForm(form) {

  // Get all the form controls
  var control, controls = form.elements;
  var radios = {};
  var t, ts;

  // Iterate over them
  for (var i=0, iLen=controls.length; i<iLen; i++) {
    control = controls[i];

    // If encounter a radio button in a set that hasn't been visited
    if (control.type == 'radio' && !radios.hasOwnProperty(control.name)) {
      ts = form[control.name];
      radios[control.name] = false; 

      // Check the set to see if one is checked
      for (var j=0, jLen=ts.length; j<jLen; j++) {

        if (ts[j].checked) {
          radios[control.name] = true; 
        }
      }
    }
  }

   // Return false if any set doesn't have a checked radio
   for (var p in radios) {

     if (radios.hasOwnProperty(p)) {

       if (!radios[p]) {
         alert('missing one');
         return false;
       }
     }
   } 
} 

</script>

<form onsubmit="return validateForm(this);">
   <input type="radio" name="r0">
   <input type="radio" name="r0">
   <br>
   <input type="radio" name="r1">
   <input type="radio" name="r1">
   <br>   
      <input type="reset"><input type="submit">
</form>

请注意，您的表单应该包含一个重置按钮，尤其是在使用单选按钮时。

于 2012-07-30T02:45:02.690 回答