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

我需要启用文本框，当用户开始打印它时结束禁用按钮时，文本框是空的。如何清除文本框时禁用按钮？

这里是我的文本框和按钮：

<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

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

回答

相关问题