Question

我有两个输入，其中一个被禁用，如果用户将任何内容添加到另一个输入中，则删除alt标记。这部分工作正常。但是如果在第一个输入中预定义了值，我也想禁用相同的输入。有时第一个输入为空，用户必须填充它，有时它有预定义值，因此应禁用另一个输入并删除alt标记。

TNX

JSFiddle

$('.gsmhr').on('input', function() {
if ($(this).val().length)
$('.gsmslo1').prop('disabled', true).val('').removeAttr("alt");
else $('.gsmslo1').prop('disabled', false);
});

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
This works on user input<br>
<input type="text" name="" value="" class="gsmhr" maxlength="15" size="17" />
<input type="text" name="" value="" class="gsmslo1" alt="simple" maxlength="3" size="1" />
<br><br>
This should work if value is predefined<br>
<input type="text" name="" value="asdf" class="gsmhr" maxlength="15" size="17" />
<input type="text" name="" value="" class="gsmslo1" alt="simple" maxlength="3" size="1" />

Answer 1

$('.gsmhr').on('input', function() {
  if ($(this).val().length)
    $(this).next('.gsmslo1').prop('disabled', true).val('').removeAttr("alt"); // disable and clear other fields
  else $(this).next('.gsmslo1').prop('disabled', false);
}).trigger("input");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This works on user input<br>
<input type="text" name="" value="" class="gsmhr" maxlength="15" size="17" />
<input type="text" name="" value="" class="gsmslo1" alt="simple" maxlength="3" size="1" />
<br><br> This should work if value is predefined<br>
<input type="text" name="" value="asdf" class="gsmhr" maxlength="15" size="17" />
<input type="text" name="" value="" class="gsmslo1" alt="simple" maxlength="3" size="1" />

使用此上下文
使用.trigger()触发加载输入

Answer 2

您可以遍历输入以检查是否设置了任何值，并使用$(this).next('.gsmslo1')定位正确的下一个输入：

$('.gsmhr').on('input', function() {
  if ($(this).val().length) {
    $(this).next('.gsmslo1').prop('disabled', true).val('').removeAttr("alt"); // disable and clear other fields
  } else {
    $(this).next('.gsmslo1').prop('disabled', false);
  }
});
$('.gsmhr').each(function() {
  if ($(this).val().length) {
    $(this).next('.gsmslo1').prop('disabled', true).val('').removeAttr("alt"); // disable and clear other fields
  } else {
    $(this).next('.gsmslo1').prop('disabled', false);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This works on user input<br>
<input type="text" name="" value="" class="gsmhr" maxlength="15" size="17" />
<input type="text" name="" value="" class="gsmslo1" alt="simple" maxlength="3" size="1" />
<br><br> This should work if value is predefined<br>
<input type="text" name="" value="asdf" class="gsmhr" maxlength="15" size="17" />
<input type="text" name="" value="" class="gsmslo1" alt="simple" maxlength="3" size="1" />

Answer 3

请使用以下代码。

$(document).ready(function() {
  function DisableEnableTextbox(currentElement){
      var value = $(currentElement).val();
        if (value.length) {
            $(currentElement).next(".gsmslo1").prop('disabled', true).val('');
        }
        else {
            $(currentElement).next(".gsmslo1").prop('disabled', false);
        }
  }

  $(".gsmhr").on("input", function() {
        DisableEnableTextbox(this);
  });

  $(".gsmhr").each(function(){
    DisableEnableTextbox(this);
  });
});

参考Fiddle

jquery基于另一个禁用一个输入

3 个答案: