在检查单选按钮检查状态后启用/禁用表单元素 [英] Enable/disable a form element after checking radio button checked states

问题描述

我对单选按钮有十个左右的问题.在用户可以前进到另一个级别之前，都需要将它们都设置为true.当且仅当这十个问题均已回答为真时，我才希望启用表单上的元素之一以进行进一步的编辑.我可以在服务器端执行此操作，但是不知道如何在JavaScript中执行此操作.有什么帮助吗?非常感激.谢谢.

I have ten or so questions with radio buttons. They all need to be set to true, before a user can move on to another level. If and only if these ten questions have be answered to true, I'd like to have one of the elements on the form be enabled for further editing. This, I can do on the server side, but don't know how to do it in JavaScript. Any help? Much appreciated. Thanks.

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

此代码扩展了其他几个问题.

This code extends to several more of questions.

我已经能够通过以下方式选择收音机:

I've been able to select radios by doing so:

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

现在，我不知道如何遍历每个对象，当我单击每个单选按钮时，无论是还是否，我都希望看到启用该元素的结果.任何想法表示赞赏.

Now, I have no idea how to iterate over each and when I click on each radio, whether yes or no, I'd like to see the result for the element to be enabled. Any thoughts much appreciated.

推荐答案

类似以下内容的工作将会完成:

Something like the following will do the job:

<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不可用或未启用，用户永远无法单击该按钮.最好以有用的状态传递表单，并在提交时使用脚本验证所有按钮均已选中，如果没有，则取消提交.

Note that this is considered bad design as if javascript is not available or enabled, the user can never click the button. Better to deliver the form in a useful state and the, when submitted, use script to validate that the buttons are all checked and cancel the submit if they aren't.

然后，您还可以在服务器上检查状态，并且仅在当前页面通过验证时才显示下一页.如果没有，请使用户返回首页.

Then at the server you can also check the state and only show the next page if the current one passes validation. If it doesn't, return the user to the first page.

这样，无论您还是用户都不关心脚本是否起作用，该页面仍然可以运行.当然，如果脚本可以运行，可能会是更好的体验，但是至少选择的不是二进制文件，它还为您提供了一个简单的后备支持，以最少的努力即可支持多种浏览器.

That way neither you or the user care if the script works or not, the page still functions. Of course it might be a better experience if the script does work, but at least the choice isn't binary and it also gives you a simple fallback to support a very wide array of browsers with minimal effort.

因此，更好的解决方案是:

So a better solution is:

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

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

And always validate at the server since you really have no idea what happened on the client.

表单控件不需要名称和ID，只需使用名称即可.在单选按钮集中，只能选中一个控件，而不能选中所有控件.

Form controls don't need a name and ID, just use a name. In a radio button set, only one control can be checked, you can't check all of them.

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

It seems to me that what you are trying to do is to see if at least one radio button has been checked in each set. You can do that based on the code above and selecting each set as you encounter it, e.g.

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>

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

Note that your form should include a reset button, particularly when using radio buttons.

这篇关于在检查单选按钮检查状态后启用/禁用表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！