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

我有一个用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>

选择要启用的Div
一个
两个
三
酒吧
酒吧
酒吧
酒吧
酒吧
酒吧

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

我在网上找到了这段代码，它“几乎”实现了我想要的功能，但并不完全。它“切换”给定元素（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>

当用户在选择器表单中选择选项“2”时，div1和div3中的所有表单元素都将被禁用。因此，当用户提交“bigform”时，只会提交div2中的值

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

如果只想提交一组表单项，请为每一组创建一个单独的表单。
不可能阻止某些输入元素提交，在服务器端进行选择性保存可能更安全/更容易，因为如果JS损坏/被破坏，它将停止保存错误结果

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

您还可以为submit按钮分配一个名称/值，并在服务器端对其进行解析。使用Javascript在submit按钮上设置一个值来告诉服务器端只使用所需的按钮是很简单的。
那么您有n个id为1..n的节，并且您只希望节i处于活动状态

如果你用这样的措辞，我会这样编码-注意：我的jQuery没有那么强，我只是伪jQuery：

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 );
} ); 

无需使用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;
    }
  }
}

函数disableFormFields（容器，isDisabled）{
变量标记名=[“输入”、“选择”、“文本区域”]；
对于（变量i=0；i



选择要启用的Div
一个
两个
三


函数部分禁用形式（选择器）{
//别忘了给你的表单ID“bigform”
var form=document.getElementById（“bigform”）；
var parts=form.getElementsByTagName（“DIV”）；
对于（变量i=0；i
Yes，但值将为POST。禁用元素的值在提交后将无法访问或将被覆盖。禁用的输入不会与表单的其余部分一起提交。这一直是我的经历。看，我真的不明白。。你想禁用所选Div中的所有元素吗？我编辑了表单，以便更清楚地表明，我不是要阻止某些输入元素提交，而是一次只允许用户使用一个部分。你的意思是，如果用户在Div1上完成填充和选择，它将被禁用，Div2将被启用..等等？请稍后再试看。我试图澄清。我想你正确理解了我的意图。让我试试这个。虽然我希望我不必为了这个任务而包含jquery，但我不明白这是怎么回事。难道不需要先禁用所有部分吗？我不明白这个脚本怎么知道哪个div包含所有的部分。你能解释一下吗？@xtofl：你默默地假设jQuery存在。没有迹象表明这是完美的。非常感谢。还有一件事：如何禁用页面加载中的所有部分？您可以在HTML中从一开始就禁用它们。或者您可以将选项“0”设为默认（选定）选项，并使用
或类似选项。非常好！谢谢你，托马拉克。
<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);
    }
  }
}