javascript - 根据条件jquery启用按钮/输入区域

Question

我正在努力弄清楚如何在特定条件下启用文本框。因此，在下面的示例中，我希望禁用输入框“name”，直到单击“enterName”按钮。然后，当在输入框“名称”中输入某些内容时，我希望启用“useName”按钮（或者只是弹出一个提示框，上面写着“输入名称”）

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

现在，我有这个：

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

 });
});

我不知道如何启用“enterName”按钮的文本框，或者在按下“useName”按钮时如何检查输入。任何帮助将不胜感激。

Answer 1

尝试使用removeAttr. 例如：

$("#enterName").click(function() {
    $('#name').removeAttr('disabled');
});

Answer 2

您想使用.prop()jQuery API来启用或禁用控件。

测试和工作：

$(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
    });
});​

Answer 3

试试这个

$("#enterName").click(function() {
   $('#name').prop('disabled', false);
})

$('#name').keyup(function(){
    $('#useName').prop('disabled', $(this).val().length == 0);
});​

jsFiddle 演示