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

Question

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

$('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

Answer 1

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

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

-jsFiddle-

Answer 2

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

假设您事先知道这些字段是哪些字段，最简单的方法可能是给它们全部相同 class，例如always-disabled.

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

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

Answer 3

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

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

策略：

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

$(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">

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

Keep disabled fields disabled after enable the others

forms

jquery

input

disabled-input

-jsFiddle-