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

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

这种方法的优点，即使看起来相当复杂，但您可以通过简单地修改.data('disabled')来保留选项，以便在稍后阶段手动更新要撤消/恢复禁用切换的字段。输入元素的属性。

战略：

在页面加载时存储所有输入元素的禁用状态
执行disable_fields()时，仅过滤原始禁用状态为false的输入元素。我们不必触摸最初已禁用的元素。

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

Answer 2

默认情况下，您可以通过在disable_fields()函数外设置varibale来保持参考未禁用的字段：

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

-jsFiddle-

Answer 3

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

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

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

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

启用其他字段后禁用禁用字段

3 个答案:

-jsFiddle-