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

Question

i am not very familiar with jquery actually but here is the situation, I have 2 textbox(txt1, txt2), and on load i need to disable txt2, and just enable txt1 for user to input any data at the first place, once the data is input, then the txt2 is enable, but it switch with txt1, which is mean that txt1 is now disabled with the value inside it and txt2 enable for input. All i need is just those two textbox, no checkbox or radio button or else.

below is my code that i have tried but not working.

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>

i need help please..

score 1 · Answer 1 · edited May 23 '17 at 12:23

just use

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

Working Demo

and you can use else if the input return empty again disabled the second one .. by using

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

Wesley Smith · Accepted Answer · 2015-12-08T02:24:19.463

0

You should use .prop() to change the disabled property, or do it using plain javascript:

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

Using `.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/>

Regarding IE6 support:

Since you need to support IE6+, you'll need to make sure that you import one of the 1.x versions of jQuery instead of the 2.x version I have used above:

Change:

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

To:

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

edited Dec 08 '15 at 02:24

answered Dec 07 '15 at 03:01

Wesley Smith

19,401
22
85
133

one more thing, i just forgot that those things need to be test using IE gte 6.0..any idea on how to do that? – Tony Dec 07 '15 at 08:36
What is `IE gte 6.0` Are you say ing you need it to work in IE6+? – Wesley Smith Dec 07 '15 at 10:16
Cool, glad you got it going, if you have time, post what you had to change so maybe itll help someone else in the future – Wesley Smith Dec 08 '15 at 01:43
What was it that you changed? Ill edit the above to include it. I'd check myself but I dont have access to a PC with IE6 – Wesley Smith Dec 08 '15 at 02:11
i've change this to this – Tony Dec 08 '15 at 02:15
Ah gotcha, Ive never had to code for IE6 so I hadnt run into that myself but I see A. Wolf got you sorted, updated above. Happy coding :) – Wesley Smith Dec 08 '15 at 02:25

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

2 Answers2

Using DOM / Javascript

Using .prop()

Regarding IE6 support:

Using `.prop()`