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

如果输入 return 再次为空，则可以使用 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

Note : be sure to 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+，因此您需要确保导入 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>

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

jquery how to enable one input box and disabled the other one onload

html

jquery

textbox

使用 DOM / Javascript

使用`.prop()`

关于 IE6 支持：

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

jquery how to enable one input box and disabled the other one onload

html

jquery

textbox

使用 DOM / Javascript

使用.prop()

关于 IE6 支持：

使用`.prop()`