单击搜索按钮后，我的按钮不会自动启用

Question

我有这样的代码，其中只有当特定的输入字段有值时，按钮才会启用，当单击搜索按钮时，姓氏将保留在输入字段上，但每次单击搜索按钮，清除按钮都不会检测到输入字段中有值，这就是它被禁用的原因，除非你更新输入字段中的文本。谢谢

<input type="text" id="lastname" name="Last_Name" value="<?php if(isset($_POST['search'])) {echo 
$_POST['Last_Name'];} ?>" required>

<button type="submit" name="search">Search</button>
<button type="submit" id="clear">Clear</button>
This is the script
$(document).ready(function(){
$('#clear').attr('disabled',true);
$('#lastname').keyup(function(){
if($(this).val().length !=0)
$('#clear').attr('disabled', false);            
else
$('#clear').attr('enable',true);
})
});

Answer 1

$(document).ready(function(){
$('#clear').attr('disabled',true);
$('#lastname').keyup(function(){
if($(this).val().length !=0)
$('#clear').attr('disabled', false);            
else
$('#clear').attr('disabled',true);
})
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="text" id="lastname" name="Last_Name" value="<?php if(isset($_POST['search'])) {echo $_POST['Last_Name'];} ?>" required>
<button type="submit" name="search">Search</button>
<button type="submit" id="clear">Clear</button>

Answer 2

如果你像下面的例子那样做，会有帮助吗？

const updateClearButtonState = () => {
const isLastNameEmpty = $('#lastname').val().length === 0;
$('#clear').attr('disabled', isLastNameEmpty);  
};
$(document).ready(function(){  
$('#lastname').keyup(updateClearButtonState);
updateClearButtonState();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="text" id="lastname" name="Last_Name" value="<?php if(isset($_POST['search'])) {echo $_POST['Last_Name'];} ?>" required>
<button type="submit" name="search">Search</button>
<button type="submit" id="clear">Clear</button>

与您的解决方案的不同之处在于，我将更改clear按钮状态的功能移到了一个单独的功能中。然后，当document准备就绪时，我立即调用该函数。

通过这种方式，clear按钮应接收正确的初始状态。