Question

如果填充了文本框（4），则禁用其他文本框。我的div中有多个文本框

例如：如果我在文本框（4）中放置文本，则文本框（1）将变为禁用状态。然后，如果我删除文本框中的文本（4），则文本框（1）的文本框将变为启用。

以下是示例html：

<div class="main-wrapper">
  <div class="form-text-wrapper">
    <div><input type="text" class="form-text" value="" name="text1" id="text1"></div>
    <div><input type="text" class="form-text" value="" name="text2" id="text2"></div>
    <div><input type="text" class="form-text" value="" name="text3" id="text3"></div>
    <div><input type="text" class="form-text" value="" name="text4" id="text4"></div>
  </div>
</div>

我的代码似乎不起作用，我不确定我的代码有什么问题。

这是我的js代码：

$('.main-wrapper').each(function(){
  var name = $('#text4', this).val();
  var disForm = $('#text1');
  if ($(name.length >= 1)) {
    $(disForm, this).attr('disabled', 'disabled');
  } else {
    $(disForm, this).removeAttr('disabled');
  }
});

请帮忙......谢谢!!!

Answer 1

＆＃13;

jQuery(function($) {
  //change event handler which gets executd whenever the value of #test4 is chaned
  $('#text4').on('change', function() {
    //find all the input elements under the current .form-text-wrapper and except #test4 and set its disabled status based on #text4's value
    $(this).closest('.form-text-wrapper').find('input').not(this).prop('disabled', this.value.length)
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-wrapper">
  <div class="form-text-wrapper">
    <div><input type="text" class="form-text" value="" name="text1" id="text1"></div>
    <div><input type="text" class="form-text" value="" name="text2" id="text2"></div>
    <div><input type="text" class="form-text" value="" name="text3" id="text3"></div>
    <div><input type="text" class="form-text" value="" name="text4" id="text4"></div>
  </div>
</div>

＆＃13;

Answer 2

好的，你正在做的事情有几个问题。

首先，每当其中一个文本框发生变化时，您就需要执行代码。您可以将该功能包装到一个函数中，并将其添加到每个文本框的change事件中。我在下面添加了一个例子。注意，这个例子可能比明确地将更改添加到每个文本框更好，但我会留给你做。

其次，如果jquery包装器中的长度大于0，则执行比较（$（name.length＆gt; = 1）） - ＆gt;别。我在代码示例中也删除了它。

第三，我对这个要求感到有些困惑。您是否希望仅针对第一个文本框切换禁用/未禁用？重新编写您正在尝试实现的代码。如果您想要禁用所有其他文本框，那么Arun P Johny的功能将完成您想要的功能。

function onTextChange(){
    console.log('running');
    $('.main-wrapper').each(function(){
      var name = $('#text4', this).val();
      var disForm = $('#text1');
      if (name.length >= 1) {
        $(disForm, this).attr('disabled', 'disabled');
      } else {
        $(disForm, this).removeAttr('disabled');
      }
    });
}

$('#text1').on('change', onTextChange);
$('#text2').on('change', onTextChange);
$('#text3').on('change', onTextChange);
$('#text4').on('change', onTextChange);

http://jsfiddle.net/jtgs5kcj/1/

检查文本框是否为空，然后输入属性

2 个答案: