Question

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

这是我的文本框和按钮：

add_filter( 'woocommerce_page_title', 'woo_shop_page_title');
       function woo_shop_page_title( $page_title ) {
                  if( 'Shop' == $page_title) {
                               return "Menu<br><span id="chinese">家庭晚餐</span>";                         }
        }

以下是我使用的代码：

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

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

它完美无缺!!!

但是当我使用这个jquery代码以编程方式清除按钮时：

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

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

知道如何更改我的函数$("#newLayerName").val('');，以便当文本框为空时按钮被禁用？

Answer 1

尝试使用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>

{{1}}

Answer 2

这是脚本

＆＃13;

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

＆＃13;

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

＆＃13;

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

我们需要在输入元素上使用keyup事件。
我们需要检查输入的值。不应允许空格（显而易见）
点击clear时将触发事件，并将调用相同的键盘触发器

＆＃13;

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

＆＃13;

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

＆＃13;

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

6 个答案: