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

Question

I need to enable textbox when user start to print on it end disable button when text box is empty.

here is my text box and button:

   <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="" /> 

Here is the code that I use:

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

From function above you can see that, when user start to enter text in text box butten enabled and when the user remove from text box button disabled.

And it works perfect!!!

But when I clear button programmatically using this jquery code:

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

The text from textbox is removed but, button is not disabled.

Any idea how to change my function setElementsDisabled so that when text box is empty the button is disabled?

Answer 1

try use $('#newLayerName').trigger("keyup") to achive what you want. Example below.

 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

Here is the script

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

You can add this

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

in a seperate function and call the same method programatically when you are clearing the text box

Answer 4

You can manually trigger a keyup event, and also heavily optimize this code (cache buttons, one-liner disabled logic, use of prop instead of attr , reading the event's value instead of building a $(this) object, etc.) :

 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

Whenever programmatically call $("#newLayerName").val(''); instead of it you can call $("#newLayerName").val('').keyup(); . Trigger keyup event after clear data.

 $("#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. We need to use keyup event on the input element.
2. We need to check the value entered the input. Spaces should not be allowed (obvious)
3. Event will be fired on click on clear and will call the same keyup trigger

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