如何清除文本框時禁用按鈕？

我需要啓用文本框，當用戶開始打印它時結束禁用按鈕時，文本框是空的。如何清除文本框時禁用按鈕？

這裏是我的文本框和按鈕：

<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，以便當文本框爲空時，按鈕被禁用？

來源

2017-07-19 Michael

也許'<'而不是'！='而且你可以做的也是當你觸發空按鈕的時候也在同一個調用中設置'disabled true'。這樣，當某人清除輸入時，該按鈕會自動阻止。 – hansTheFranz

查看答案我給出如下 –

https://learn.jquery.com/using-jquery-core/faq/how-do-i-disable-enable-a-form-element/ – epascarello

嘗試使用$('#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>

來源

2017-07-19 12:38:05

應該使用道具 – epascarello

這個代碼仍然可以通過緩存'$（'＃btnSaveLayer'）'和'$（'＃newLayerName'）'進行大量優化，並且在一個簡單的行中重寫'disabled'邏輯。回答） –

@epascarello True，已更新並重寫了代碼 –

這裏是腳本

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

來源

2017-07-19 12:35:33

Hes問如何使它工作當他使用$（「＃newLayerName」）.val（''）'清除文本框 –

好的時候，我更新了我的腳本 –

您正在調用一個'check'函數，包含未緩存的按鈕，每秒10次。這是一個操作和DOM調用的插槽。此代碼很重，可以大大優化。 –

您可以在一個單獨的功能添加此

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

和編程調用相同的方法，當你清除文本框中

來源

2017-07-19 12:37:02

你甚至可以緩存按鈕並將所有這些邏輯寫成一個簡單的單行（參見我的答案）。 –

@JeremyThille是類似於觸發器 –

與觸發器無關。我正在談論「真假」邏輯。 –

可以手動觸發keyup事件，並且還大量優化該代碼（緩存按鈕，一個襯墊disabled邏輯，使用prop代替attr，讀出事件的值，而不是構建$(this)對象等）：

const $btnSaveLayer = $('#btnSaveLayer'), 
 
\t $newLayerName = $("#newLayerName") 
 

 
$('#newLayerName').keyup(e => { 
 
    $btnSaveLayer.prop('disabled', !e.target.value.length); 
 
}) 
 

 
$("#clearBtn").click(() => { 
 
\t $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>

來源

2017-07-19 12:42:56

無論何時編程調用$("#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>

來源

2017-07-19 12:44:24

我們需要輸入元素上使用keyup事件。
我們需要檢查輸入的值。空間不應該被允許（明顯）
事件將在點擊clear被解僱，將調用相同KEYUP觸發

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

來源

2017-07-20 09:32:22

如何清除文本框時禁用按鈕？

回答

相關問題