Enable and Disable Input Field On Click (not toggle)

Question

Q: How do i make a field disable and then another one enable when clicking on an anchor tag.

Progress so far: Disabling the field works, but Re-enabling the field is just another click away unfortunately. Also, the second field doesn't get enabled on the click.

// When clicking "Lock your username" that input field should be disabled, 
//and the Comment section should be enabled
$("#lock").click(function() {
  $("#sender").attr('disabled', !$("#sender").attr('disabled'));
  $("#message").attr('disabled', !$("#message").attr('enabled'));

});

//problems right now:
// clicking twice re-enables the field.
// from what i've understood, disabled fields cannot be targeted with event handlers?
//
//

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formInput">
  <input type="text" id="sender" placeholder="Your Name" />

  <a id="lock" style="border:1px solid rgba(000,200,000,0.5);background:#ccc;cursor:pointer;padding:2px;width:150px">Lock your username</a>

  <div id="messages" style="height:100px; border:1px solid #000;width:200px;">
    &nbsp; Messages will go here
  </div>
  <input type="text" id="message" placeholder="write your comment here" autocomplete="off" disabled />
  <input type="submit" id="send" style="border:1px solid rgba(000,200,000,0.5);background:#ccc;cursor:pointer;padding:2px;width:150px" value="send message" />

</form>

Jrd · Accepted Answer · 2015-08-06 11:41:42Z

3

What you could do is remove the handler after the click if you only want it to be done once. Something like this:

var lockHandler = function () {
    $('#sender').attr('disabled', 'disabled');
    $('#message').attr('disabled', null);
    $('#lock').off('click', lockHandler);
}

$('#lock').on('click', lockHandler);

Probably also want to check to make sure there is an actual user name entered before removing it.

answered Aug 6, 2015 at 11:41

Jrd

7287 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joel Over a year ago

Thank you so much! Very clever solution!

Alexis · Accepted Answer · 2015-08-06 11:41:20Z

2

For Jquery 1.6+ you can use

$("input").prop('disabled', true);
$("input").prop('disabled', false);

answered Aug 6, 2015 at 11:41

Alexis

5,8211 gold badge30 silver badges46 bronze badges

Comments

Rajan Goswami · Accepted Answer · 2015-08-06 11:44:56Z

2

This should help:

$("#lock").click(function(){
    $("#sender").attr('disabled', !$("#sender").attr('disabled')); 
    $("#message").attr('disabled', !$("#message").attr('disabled')); 
});

Working Fiddle: http://jsfiddle.net/4u5yuu6f/

edited Aug 6, 2015 at 11:44

answered Aug 6, 2015 at 11:39

Rajan Goswami

7691 gold badge5 silver badges17 bronze badges

1 Comment

Joel Over a year ago

Thanks for your input but however, if you click multiple times, the disabling just switches.

Pranav C Balan · Accepted Answer · 2015-08-07 04:18:49Z

1

You can use prop() with callback function , this will toggle the disabled property

$("#lock").click(function(e) {
  $("#sender,#message").prop('disabled', function(i, v) {
    return !v;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="formInput">
  <input type="text" id="sender" placeholder="Your Name" />
  <a id="lock" style="border:1px solid rgba(000,200,000,0.5);">Lock your username</a>
  <div id="messages" style="height:100px; border:1px solid #000;width:200px;">
    &nbsp;
  </div>
  <input type="text" id="message" placeholder="comment here" autocomplete="off" disabled/>
  <input type="button" id="send" value="send message" />
</form>

If you want only execute it once then use one()

$("#lock").one('click', function(e) {
  $("#sender,#message").prop('disabled', function(i, v) {
    return !v;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="formInput">
  <input type="text" id="sender" placeholder="Your Name" />
  <a id="lock" style="border:1px solid rgba(000,200,000,0.5);">Lock your username</a>
  <div id="messages" style="height:100px; border:1px solid #000;width:200px;">
    &nbsp;
  </div>
  <input type="text" id="message" placeholder="comment here" autocomplete="off" disabled/>
  <input type="button" id="send" value="send message" />
</form>

edited Aug 7, 2015 at 4:18

answered Aug 6, 2015 at 11:39

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

1 Comment

Joel Over a year ago

Thank you so much for your contribution. However, if you click the "lock your username" multiple times it just switches.

Collectives™ on Stack Overflow

Enable and Disable Input Field On Click (not toggle)

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related