jquery - 观察 DOM 元素的变化

Question

嘿，我有一个表格，里面有 4 <input type='text'>和一个残疾人 <button> .

其中 2 个 <input type='text>是只读的，当另一个被赋予由 keyup() 事件触发的值时，将自动填充。

我的问题是，如何删除 <button>当这两个“禁用”时“禁用”的属性 <input type='text'>被赋值了吗？我必须在哪里放置事件？

这是我的代码:

<input type="text" class="firstbox" name='firstbox' required>
<input type="text" class='automaticfilling' readonly="readonly"
 placeholder='will be filled as input.firstbox is being typed'>

<input type="text" class="secondbox" name='secondbox' required>
<input type="text" class='automaticfillingtwo' readonly="readonly"
 placeholder='will be filled as input.secondbox is being typed'>

<button type='button' value='click me' disabled='disabled'>

JQuery 代码:

$(function(){

$('input.firstbox').keyup(function(){
var value = $(this).val();
 $('input.automaticfilling').val(value);
});

$('input.secondbox').keyup(function(){
var value = $(this).val();
 $('input.automaticfillingtwo').val(value);
});

//In what element should I put an trigger for enabling button 
//after those two readonly textboxes has been filled?

});

Answer 1

设置值后，您需要检查 readonly input 元素的状态。如果它们都有值，您可以从 button 中删除 disabled 属性。试试这个:

$(function(){
    var $auto1 = $('input.automaticfilling'), 
        $auto2 = $('input.automaticfillingtwo');

    $('input.firstbox').keyup(function(){
        $auto1.val($(this).val());
        checkAutoValues();
    });

    $('input.secondbox').keyup(function(){
        $auto2.val($(this).val());
        checkAutoValues();
    });

    function checkAutoValues() {
        $('button').prop('disabled', !($auto1.val() && $auto2.val()));
    }
});

Example fiddle

请注意，当两个框都有值时，该按钮将被启用，而当其中一个框没有值时，该按钮将被禁用。

另请注意，通过使用 DOM 遍历查找所需元素，您可以使 JS 代码完全不知道您拥有的 autofilling 框的数量。试试这个:

<div class="auto-container">
    <input type="text" class="firstbox" name='firstbox' required />
    <input type="text" class='automaticfilling' readonly="readonly" placeholder='will be filled as input.firstbox is being typed' />
</div>

<div class="auto-container">
    <input type="text" class="firstbox" name='firstbox' required />
    <input type="text" class='automaticfilling' readonly="readonly" placeholder='will be filled as input.firstbox is being typed' />
</div>

<button type='button' value='click me' disabled='disabled'>Click me</button>

$('input.firstbox').keyup(function () {
    $(this).closest('.auto-container').find('.automaticfilling').val($(this).val());

    var buttonEnabled = true;
    $('.automaticfilling').each(function() {
        if (!$(this).val()) {
            buttonEnabled = false;
            return;
        }
    });
    $('button').prop('disabled', !buttonEnabled);
});

Example fiddle