Question

我有以下表单，并希望使用jQuery执行以下操作：

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

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

我有以下代码适用于第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

尝试连接所有相关输入的值并将其用于检查

＆＃13;

$(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');
});

＆＃13;

input:disabled{background:#ccc;}

＆＃13;

<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>

＆＃13;

禁用输入到一组其他字段的表单字段

1 个答案: