禁用所选 Div 中的所有表单元素（已编辑）

Question

我有一个用 div 分成不同部分的大表单。每个部分都在同一个表单（bigform）中，我需要确保一次只启用/可编辑一个部分。如果用户在将数据输入到一个部分后更改了部分，则所有数据将从旧部分中清除，然后再禁用它。对我来说理想的方式是拥有这样的东西：

<form>
    <select name="selector">
        <option>Choose Which Div To Enable</option>
        <option value='1'>One</option>
        <option value='2'>Two</option>
        <option value='3'>Three</option>
    </select>
</form>


<form name="bigform">
    <div id="1">
        <input type="text">
        <select name="foo">
            <option>bar</option>
            <option>bar</option>
        </select>
    </div>

    <div id="2">
        <input type="text">
        <select name="foo">
            <option>bar</option>
            <option>bar</option>
        </select>
    </div>

    <div id="3">
        <input type="text">
        <select name="foo">
            <option>bar</option>
            <option>bar</option>
        </select>
    </div>
</form>

当用户在选择器表单中选择选项“Two”时，DIV 1 和 3 中的所有表单元素都将被禁用。我已经在网上搜索了几个小时，但找不到解决方案。实现这一目标的最佳方法是什么？

我在网上找到了这段代码，它“几乎”能满足我的需求，但并不完全。它“切换”给定元素 (el) 中的表单元素。我正在尝试做的是与此相反的事情。

    <form>
        <select name="selector" onChange="toggleDisabled(document.getElementByID(this.value))>
            <option>Choose Which Div To Enable</option>
            <option value='1'>One</option>
            <option value='2'>Two</option>
            <option value='3'>Three</option>
        </select>
    </form>
<script>
function toggleDisabled(el){
    try {
        el.disabled = el.disabled ? false : true;
    }
    catch(E){}

    if (el.childNodes && el.childNodes.length > 0) {
        for (var x = 0; x < el.childNodes.length; x++) {
            toggleDisabled(el.childNodes[x]);
        }
    }
}
</script>

Answer 1

使用 jQuery 等脚本库不解决它的方法：

function disableFormFields(container, isDisabled) {
  var tagNames = ["INPUT", "SELECT", "TEXTAREA"];
  for (var i = 0; i < tagNames.length; i++) {
    var elems = container.getElementsByTagName(tagNames[i]);
    for (var j = 0; j < elems.length; j++) {
      elems[j].disabled = isDisabled;
    }
  }
}

---

<select name="selector" onchange="partiallyDisableForm(this)">
  <!-- give every option a numeric value! -->
  <option value='0'>Choose Which Div To Enable</option>
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3'>Three</option>
</select>

---

function partiallyDisableForm(selector) {
  // don't forget to give your form the ID "bigform"
  var form = document.getElementById("bigform");
  var parts = form.getElementsByTagName("DIV");

  for (var i = 0; i < parts.length; i++) {
    var part = parts[i];
    // give your form parts the ID "formpart_1" through "formpart_3"
    if (part.id.match(/^formpart_\d+$/)) {
      // you must implement what to do if selector.value is 0
      var isDisabled = (part.id != "formpart_" + selector.value);
      disableFormFields(part, isDisabled);
    }
  }
}

Answer 2

当用户在选择器表单中选择选项“Two”时，DIV 1 和 3 中的所有表单元素都将被禁用。所以当用户提交“bigform”时，只会提交 div 2 中的值。

没有。表单将始终作为一个整体提交，无论 UI 中禁用了哪些元素。

如果您只想提交一组表单项，请为每组创建单独的表单。

Answer 3

不可能阻止某些输入元素提交，并且在服务器端进行选择性保存可能更安全/更容易，因为如果 JS 损坏/被破坏，它将停止保存错误结果。

您可以禁用未提交的元素，并可能更改其名称属性以确保服务器不使用这些值。

您还可以为提交按钮分配名称/值，并在服务器端对其进行解析。使用 Javascript 在提交按钮上设置一个值来告诉服务器端只有所需的按钮是微不足道的。

Answer 4

所以你有 N 个 id 为 1..N 的部分，你只希望部分 i 处于活动状态？

如果你把它放在那个措辞中，我会像这样编码 - 请注意：我的 jQuery 不是那么强大，我只是伪 jQuerying：

function enable( element, sensitive ) {
   //recursively disable this node and it's children       
   element.disabled = !sensitive;
   if( element.childNodes ) {
      for( var i = 0; i != element.childNodes.length; ++i ) {          
       enable( element.childNodes[i], sensitive );
      }
   }
}

// this function should rely on the structure of your document
// it ought to visit all sections that need to be enabled/disabled
function enableSection( i ) {
   $("#bigform > div").each( function( index, element ) {
       enable( element, index==i );
   });
}

$("#sectionselector").change( function( ) {
   // find value of active section
   var activesection = $("#sectionselector").value; // or the like
   enableSection( activesection );
} );