在“是或否”的情况下使用 Javascript 禁用表单答案

【问题标题】：Disabling a Form using Javascript under condition of "yes or no"在“是或否”的情况下使用 Javascript 禁用表单
【发布时间】：2014-07-24 11:21:03
【问题描述】：

我有一个单选按钮样式的带有是或否问题的表单，以表明该表单之前是否已填写并提交。根据用户的回答，如果答案是“是”，我想使用 Javascript 禁用此表单。

“是”表示该表格之前已经提交过，因此不允许重新填写表格。这是为了尝试停止双重或多重提交。

任何建议将不胜感激。

黎明26

【问题讨论】：

不确定您是否会以这种方式实现您的既定目标......如果他们已经提交了，为什么他们会来表单？无论如何，为是/否问题在更改事件上放置一个侦听器，然后切换display CSS。试一试，如果您有任何问题，请发布您的代码。
表单没有禁用属性，您只能禁用个别控件。所以你可以这样做，或者隐藏表单（但是如果你隐藏它，如何取消选中按钮？）。无论哪种方式，您都应该在服务器上管理重复提交。

标签： javascript forms disabled-input

【解决方案1】：

您可以创建一个函数，根据是否选中复选框来禁用除复选框之外的所有表单控件。这不会停止重复提交，因此您仍然需要在服务器上处理它。您也可以根据需要隐藏控件，但禁用它们可能就足够了。

您可能还想发布一条消息来解释表单控件被禁用的原因。

function checkDisabled(target) {
  var form = target.form;
  var elements = form.elements;
  var disable = target.checked;

  // Check every control in the form
  for (var i=0, iLen=elements.length; i<iLen; i++) {

    // Don't disable the checkbox
    if (elements[i] != target) {

      // Disable (or not) based on whether checkbox is checked
      elements[i].disabled = disable; 
    }
  }
}

一些测试标记：

<label for="dateTime">Date and time<input id="dateTime" name="dateTime">
  <br>
  <span class="screenTip">YYYY-MM-DD hh:mm:ss</span>
</label>

<form>
  Have you submitted this form before? 
  <input type="checkbox" name="hasBeenSubmitted" value="1" onclick="checkDisabled(this)">
  <br>
  Foo: <input type="text" name="foo">
  <br>
  Bar: <input type="text" name="bar">
  <br>
  <input type="submit">
</form>

【讨论】：

【解决方案2】：

我可能会使用附加到“是”单选按钮的 onchange 函数来隐藏表单或将其从页面中完全删除。您的标记可能与此类似：

<form id="formId">
    <input type="radio" value="Yes" onchange="YourClass.disableForm()"/>
    ...
</form>

还有 javascript：

var YourClass = function() {
    return {
        disableForm : function() {
            document.getElementById("formId").setAttribute("style", "display: none;");
        }
    };
}();

【讨论】：