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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我需要帮助...

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()更改已禁用的属性，或使用普通的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 +，因此您需要确保导入1.x版本的jQuery而不是我上面使用的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>