清除文本框后如何禁用按钮？

Question

当文本框为空时，当用户开始在其上打印结束禁用按钮时，我需要启用文本框。

这是我的文本框和按钮：

   <button id="btnSaveLayer" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b" onclick="SaveNewLayer()" disabled>save</button>
   <input type="text" id="newLayerName" placeholder="name" value="" /> 

这是我使用的代码：

function setElementsDisabled() {
    $('#newLayerName').keyup(function () {
        if ($(this).val().length != 0)
            $('#btnSaveLayer').attr('disabled', false);
        else
            $('#btnSaveLayer').attr('disabled', true);
    })
}

从上面的功能中可以看到，当用户开始在文本框中输入文本但被启用时，以及用户从文本框中删除时，按钮被禁用。

而且效果很好！！！

但是当我使用以下jQuery代码以编程方式清除按钮时：

  $("#newLayerName").val('');

来自文本框的文本已删除，但是按钮未被禁用。

任何想法如何更改我的功能setElementsDisabled以便在文本框为空时禁用按钮？

Answer 1

尝试使用$('#newLayerName').trigger("keyup")获得所需的内容。 下面的例子。

 function setElementsDisabled() { $('#newLayerName').keyup(function() { $('#btnSaveLayer').prop('disabled', $(this).val().length == 0); }) } setElementsDisabled() $("#clear").click(function() { $("#newLayerName").val('').trigger("keyup"); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btnSaveLayer" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b" onclick="SaveNewLayer()" disabled>save</button> <input type="text" id="newLayerName" placeholder="name" value="" /> <button id="clear"> clear</button> 

Answer 2

这是脚本

 $("#newLayerName").keyup(function(e){ check($(this)); }) $("#newLayerName").change(function(){ check($("#newLayerName")); }) function check(obj){ if($(obj).val().length==0){ $("#btnSaveLayer").prop("disabled",true); } else{ $("#btnSaveLayer").prop("disabled",false); } } $("#newLayerName").val("Hello"); check($("#newLayerName")); setTimeout(function(){ $("#newLayerName").val("").change(); },3000) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btnSaveLayer" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b" onclick="SaveNewLayer()" disabled>save</button> <input type="text" id="newLayerName" placeholder="name" value="" /> 

Answer 3

您可以添加

 if ($('#newLayerName').val().length != 0)
                $('#btnSaveLayer').attr('disabled', false);
            else
                $('#btnSaveLayer').attr('disabled', true); 

在单独的函数中，并在清除文本框时以编程方式调用相同的方法

Answer 4

您可以手动触发一个keyup事件，并且还可以对该代码进行大量优化（缓存按钮， disabled一线逻辑，使用prop而不是attr ，读取事件的值而不是构建$(this)对象等）：

 const $btnSaveLayer = $('#btnSaveLayer'), $newLayerName = $("#newLayerName") $('#newLayerName').keyup( e => { $btnSaveLayer.prop('disabled', !e.target.value.length); }) $("#clearBtn").click( () => { $newLayerName.val('').trigger("keyup"); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btnSaveLayer" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b" onclick="SaveNewLayer()" disabled>save</button> <input type="text" id="newLayerName" placeholder="name" value="" /> <button id="clearBtn">Clear</button> 

Answer 5

每当以编程方式调用$("#newLayerName").val(''); 代替它，您可以调用$("#newLayerName").val('').keyup(); 。 清除数据后触发keyup事件。

 $("#newLayerName").keyup(function(e){ if($(this).val().length==0){ $("#btnSaveLayer").prop("disabled",true); } else{ $("#btnSaveLayer").prop("disabled",false); } }) function programaticallyClear() { $("#newLayerName").val('').keyup(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btnSaveLayer" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b" onclick="SaveNewLayer()" disabled>save</button> <input type="text" id="newLayerName" placeholder="name" value="" /> <button id="programaticallyClearButton" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b" onclick="programaticallyClear()" >programaticallyClearButton</button> 

Answer 6

1. 我们需要在输入元素上使用keyup事件。
2. 我们需要检查输入值。 不允许有空格（明显）
3. 单击clear将触发事件，并将调用相同的键入触发

 $('#newLayerName').on('keyup', function() { $('#btnSaveLayer').prop('disabled', $.trim($(this).val()).length == 0); }); $("#clear").click(function() { $("#newLayerName").val('').trigger("keyup"); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btnSaveLayer" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b" onclick="SaveNewLayer()" disabled>save</button> <input type="text" id="newLayerName" placeholder="name" value="" /> <button id="clear"> clear</button>