jquery如何启用一个输入框并禁用另一个onload

Question

我实际上对 jquery 不是很熟悉，但情况是这样，我有 2 个文本框（txt1，txt2），在加载时我需要禁用 txt2，并且只需启用 txt1 以便用户首先输入任何数据，一旦输入数据，则启用 txt2，但它与 txt1 切换，这意味着 txt1 现在已禁用，其中的值和 txt2 启用输入。我只需要这两个文本框，没有复选框或单选按钮。

以下是我尝试过但无法正常工作的代码。

input 1<input type="text" id="txt1" name="txt1"/> <br>input 2<input type="text" id="txt2" name="txt2" />

 <script type="text/javascript">
 $(document).ready(function(){
	if($('#txt1').val().length != 0){
		 $('#txt2').attr('disabled',true);
		$('#txt1').removeAttr('disabled');
	}else
		$("#txt2").removeAttr("disabled");
		$("#txt1").attr("disabled",true);
</script>

我需要帮助..

Answer 1

随便用

$(document).ready(function(){
  $('#txt2').prop('disabled',true);
  $('#txt1').on('input change' , function(){
    if($.trim($(this).val()) !== ""){
      $('#txt2').prop('disabled',false);
    }
  });
});

Working Demo

如果输入返回为空，您可以使用 else 再次禁用第二个 .. 使用

$(document).ready(function(){
  $('#txt2').prop('disabled',true);
  $('#txt1').on('input change' , function(){
      if($.trim($(this).val()) !== ""){
        $('#txt2').prop('disabled',false);
      }else{
        $('#txt2').prop('disabled',true);
      }
  });
});

Working Demo

注意：一定要linking jquery in html

Answer 2

您应该使用.prop() 来更改 disabled 属性，或者使用普通的 javascript：

使用 DOM / Javascript

$(document).ready(function() {
  $('[name="txt1"]').blur(function() {
    var that = $('[name="txt2"]')[0];
    if (this.value != '') {
      this.disabled = true;
      that.disabled = false;
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
input 1
<input type="text" id="txt1" name="txt1" />
<br>input 2
<input type="text" id="txt2" name="txt2" disabled/>

---

使用.prop()

$(document).ready(function() {
  $('[name="txt1"]').blur(function() {
    var $this=$(this);
    var $that = $('[name="txt2"]');
    if (this.value != '') {
      $this.prop('disabled',true);
      $that.prop('disabled',false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
input 1
<input type="text" id="txt1" name="txt1" />
<br>input 2
<input type="text" id="txt2" name="txt2" disabled/>

---

关于 IE6 支持：

由于您需要支持 IE6+，因此您需要确保导入 jQuery 的 1.x 版本之一，而不是我上面使用的 2.x 版本：

更改：

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

收件人：

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