在启用其他字段后保持禁用字段答案

【问题标题】：Keep disabled fields disabled after enable the others在启用其他字段后保持禁用字段
【发布时间】：2016-10-15 12:28:01
【问题描述】：

我想禁用表单中的所有字段，然后只启用之前已启用的字段。但是当我尝试这样做时，所有字段（包括预先禁用的字段）都将被启用。

$('body').on('click', 'input[type="button"]', function() {
    disable_fields(true);

    setTimeout(function() {
        disable_fields(false);
    }, 1000);
});

function disable_fields(t) {
    var fields = $('input,textarea,select,[type="file"]');

    fields.each(function(index, element) {
        if($(this).is(':disabled')) {
            is_disabled = true;
        }

        console.log(fields.attr('name')+' - '+is_disabled);
        $(this).prop('disabled', t);
        console.log(fields.attr('name')+' - '+is_disabled);
    });
}

我怎样才能做到这一点？

jsFiddle

【问题讨论】：

一旦您触发disable_fields() 函数，就无法知道哪些字段最初被禁用。一种方法是将文档就绪的每个字段的disabled 状态存储在数据属性/对象中，然后仅对不具有原始禁用状态的字段执行切换。
为什么要故意启用不想启用的字段？通过不启用 enable_all 函数内的这些字段（更改名称会变得很糟糕，但它会让您的生活更轻松），可以轻松避免整个问题。
因为当我点击表单中的按钮时，我想禁用所有字段。如果发生任何错误，我想启用在我点击按钮之前启用的那些字段。

标签： jquery forms input disabled-input

【解决方案1】：

根据我的评论，一旦您开始修改 disabled 属性，就无法确定最初禁用了哪个输入元素。为此，您必须将“原始”禁用状态存储在某种数据结构中，例如 jQuery 中元素的 data() 对象。我选择不将其存储为 HTML5 数据属性，因此用户无法通过修改标记轻松操纵行为。

这种方法的优点是，尽管它看起来相当复杂，但您可以保留在稍后阶段手动更新要撤销/恢复禁用切换的字段的选项，只需修改 .data('disabled') 属性输入元素。

策略：

在页面加载时存储所有输入元素的禁用状态
在执行disable_fields()时，只过滤原始禁用状态为假的输入元素。我们不必去触碰原本已经被禁用的元素。

$(document).ready(function() {

  // Store the original disabled status of all input elements
  var $fields = $('input,textarea,select,[type="file"]');
  $fields.each(function() {
    $(this).data('disabled', $(this).prop('disabled'));
  });

  $('body').on('click', 'input[type="button"]', function() {
    disable_fields(true);

    setTimeout(function() {
      disable_fields(false);
    }, 1000);
  });

  function disable_fields(t) {
    // Perform toggling only on fields that have data attribute of disabled set to false
    // i.e. not disabled on page load
    $fields.filter(function() {
      return !$(this).data('disabled');
    }).prop('disabled', t);
  }

});

input[name="first"] {
  width: 250px;
}
input[name="second"] {
  width: 90px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="first" value="Disabled (and will keep being disabled)" disabled>
<input type="text" name="second" value="Not disabled">
<input type="button" name="button" value="Button">

【讨论】：

您的解决方案在 jsFiddle 上完美运行 :) 非常感谢！现在将其导入我的网站，我认为我永远不想禁用其他字段。哈哈！无论如何:) 再次感谢！
@Erik 如果您不想修改可由disable_fields() 函数修改的元素子集，请A. Wolff's answer is more than sufficient。我的只是一个面向未来的解决方案；）也更新了我的问题，因为我忘记在 sn-p 中加载 jQuery。
好的。我想要一个面向未来的解决方案；）

【解决方案2】：

您可以通过在disable_fields() 函数之外设置变量来默认保留未禁用字段的引用：

var fields = $('input,textarea,select,[type="file"]').filter(':not([disabled])');

-jsFiddle-

【讨论】：

【解决方案3】：

您需要一些其他方法来区分永远无法启用的字段，因为一旦所有其他字段都被禁用，被禁用的简单属性不足以识别它们。

假设您事先知道这些字段将是哪些字段，最简单的方法可能是为它们提供所有相同的类，例如always-disabled.

然后，当您启用您的字段时，您可以将它们从您循环启用的列表中排除：

var fields = $('input,textarea,select,[type="file"]').filter(':not(.always-disabled)');

【讨论】：