jquery - 使用 jQuery 禁用文本字段

标签 jquery html css

嗨, friend 们,这里是我使用 native JavaScript 编写的代码。但现在我想在 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;
      }
    };

这是有效的 javascript jsbin 链接 - http://jsbin.com/vumuf/1/edit?html,css,js,output

最佳答案

您可以使用.click() 用于 jQuery 中的点击事件以及 .prop() 设置输入的状态:

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

<强> Fiddle Demo

关于jquery - 使用 jQuery 禁用文本字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22829039/

相关文章:

javascript - Ajax 自动刷新 - 表格不刷新

带有标题和文本的 html5 大纲

JavaScript/Angular 触发器表单验证

html - 无法使该网站响应 Bootstrap 列类

css - 如何将不同的 CSS 样式应用于子元素,因为它们出现在彼此内部?

html - 如何使用CSS水平居中div和span元素

javascript - 无法将单击事件添加到 jquery 中动态附加的列表项

javascript - 当对象在视口(viewport)中可见时切换类

javascript - 使用 jQuery 和 <audio>

javascript - 在悬停的 li 元素上相对于 li 的位置显示一个隐藏的响应式 div