javascript - 在输入到一组其他字段时禁用表单字段

Question

我有下面的表格，想用 jQuery 来做以下事情:

1/如果在任何一个或多个字段 'filter_loan_id'、'filter_fname'、'filter_lname'、'filter_postcode'中输入了任何字符，则禁用字段 'filter_from' 和 'filter_to' .

2/仅当任何字段中没有输入时才重新启用字段“filter_from”和“filter_to” 'filter_loan_id'、'filter_fname'、'filter_lname'、'filter_postcode' .也就是说，所有 4 个字段都是空的。

我有以下适用于第 1 点的代码 - 当任何其他字段输入数据时，它会禁用这 2 个字段。

它不能按第 2 点的要求工作 - 如果其他任何一个字段被清除，它目前会重新启用这 2 个字段。它应该只在清除所有其他字段时重新启用这 2 个字段。

应忽略字段“filter_com”和“filter_employer”。此处仅提及它们是为了说明并非表单上的所有字段都将用于禁用其他 2 个字段，只是选定的字段。

<form>
  <input name="filter_from" type="text" autocomplete="off">
  <input name="filter_to" type="text" autocomplete="off">
  <input name="filter_loan_id" type="text" autocomplete="off">
  <input name="filter_fname" type="text" autocomplete="off">
  <input name="filter_lname" type="text" autocomplete="off">
  <input name="filter_postcode" type="text" autocomplete="off">
  <input name="filter_com" type="text" autocomplete="off">
  <input name="filter_employer" type="text" autocomplete="off">
</form>

$(document).ready(function() {

    $('input[name=filter_fname], input[name=filter_lname], input[name=filter_loan_id], input[name=filter_postcode]').change(function() {
        if ($(this).val() != '') {
            $('input[name=filter_from]').prop('disabled', true);
            $('input[name=filter_to]').prop('disabled', true);
        } else {
            $('input[name=filter_from]').prop('disabled', false);
            $('input[name=filter_to]').prop('disabled', false);
        }
    });

});  

Answer 1

尝试连接所有相关输入的值并用它来检查

$(document).ready(function() {

  var disableable = $('input[name=filter_from], input[name=filter_to]'),
      valuable = $('input[name=filter_fname], input[name=filter_lname], input[name=filter_loan_id], input[name=filter_postcode]').on('input change', function() {

      var combinedValue = valuable.get().map(function(element) {
        return element.value;
      }).join('');

      disableable.prop('disabled', combinedValue !== '');
    });
  valuable.trigger('change');
});

input:disabled{background:#ccc;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form>
  filter_from<input name="filter_from" type="text" autocomplete="off"><br> filter_to
  <input name="filter_to" type="text" autocomplete="off"><br> filter_loan_id
  <input name="filter_loan_id" type="text" autocomplete="off"><br> filter_fname
  <input name="filter_fname" type="text" autocomplete="off"><br> filter_lname
  <input name="filter_lname" type="text" autocomplete="off"><br> filter_postcode
  <input name="filter_postcode" type="text" autocomplete="off"><br> filter_com
  <input name="filter_com" type="text" autocomplete="off"><br> filter_employer
  <input name="filter_employer" type="text" autocomplete="off">
</form>