CODEWITHSUNDEEP
jqueryhtmlcss
naresh kumar
naresh kumar

Reputation: 2241

Disabled the textfield using jQuery

Hi friends here is the code which one i did using native javascript. But now same thing I want to do in jQuery.

html - 

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <form>
        <fieldset>
          <legend>Suscribe</legend>
          <p><input id='newsYes' type='checkbox' /> Please send me monthly discount.</p>
    <p>Email: <input id='newsEmail' type='text' placeholder='your email' disabled/></p>
        </fieldset>
      </form>
    </body>
    </html>

css - 

#newsEmail {
 width: 175px;
}
#newsEmail:disabled {
  background: #999;
}
#newsEmail:enabled {
  background: #fff;
}

javascript -

    var elem = document.getElementById('newsYes');

    elem.onclick = function(){
      if(elem.checked){
        document.getElementById('newsEmail').disabled = false;
      }else {
       document.getElementById('newsEmail').disabled = true;
      }
    };

Here is the working javascript jsbin link - http://jsbin.com/vumuf/1/edit?html,css,js,output

Upvotes: 1

Views: 44

Answers (1)

Felix
Felix

Reputation: 38112

You can use .click() for click event in jQuery along with .prop() to set the state of your input:

$('#newsYes').click(function () {
    $('#newsEmail').prop('disabled', !this.checked)
})

Fiddle Demo

Upvotes: 3

Related Questions