Question

I am struggling to figure out how to enable a text box upon a certain condition. So, in the following example, I want the input box “name” to be disabled until the button “enterName” is clicked. Then when something is entered into the input box “name” I want the “useName” button to become enabled (or just pop up an alert box that says “enter a name”)

<button id="enterName"> Enter a Name </button>
Name: <input type="text" id="name" disabled="disabled"/>
<button id="useName" disabled="disabled"> Use this name </button>

Right now, I have this:

$(document).ready(function(){
   $("button:#enterName").click(function(){

       /* ??? */

     });
    });

$(document).ready(function(){
  $("button:#useName").click(function(){

    $("div.nameUsing").append($('input#name').val());
    $('input#name').val("");   //reset input field

 });
});

I don’t know how to enable the text box the “enterName” button, or how to check for input when the “useName” button is pressed. Any help would be greatly appreciated.

Answer 1

You want to use the .prop() jQuery API to enable or disable a control.

Tested and working:

$(document).ready(function () {
    $("button#enterName").click(function () {
        $('input#name').prop('disabled', false);
    });
    $('input#name').change(function () {
        $("button#useName").prop('disabled', $(this).val().length === 0); //enable if length > 0, disable otherwise
    });
    $("button#useName").click(function () {
        $("div.nameUsing").append($('input#name').val());
        $('input#name').val("");   //reset input field
    });
});​