javascript - 使用 Jquery 验证所有堂兄输入元素

Question

我是新来的查询。每行都有多个输入元素，包括提交图像按钮。如果该行中有任何空输入值，我想在键入时禁用保存按钮。我成功地编写了以下代码。这是正确的方法吗？有没有更好的办法？

提前致谢

$(':text').bind('input propertychange', function()  {

    var valid = true;
    var $this=$(this).parent().parent().children('td').children(':text');

    $this.each(function() { 
        if(!$(this).val()) {
            valid = false;
        }
    });

    if(!valid)
    {
        $(this).parent().parent().children('td').children(':image').attr('src', 'image/savedisabled.png');
        $(this).parent().parent().children('td').children(':image').prop('disabled', true);
    }
    else
    {
        $(this).parent().parent().children('td').children(':image').attr('src', 'image/save.png')
        $(this).parent().parent().children('td').children(':image').prop('disabled', false);
    }

});
<table>
<tbody> 
        <form action="" method="post">   
        <tr>                   
           <td><input type="text" name="id" value="1" size="4"/></td>
           <td><input type="text" name="name" value="Test 1" size="50"/></td>          
           <td><input type="text" name="year" value="1415" size="10"/></td>
           <td><input type="checkbox" name="readonly" value="1" checked></td>                    
           <td><input type="image" name="save_submit" src="image/savedisabled.png" height="13" alt="Submit"></td>
         </tr>
        </form>

        <form action="" method="post">   
        <tr>                   
           <td><input type="text" name="id" value="2" size="4"/></td>
           <td><input type="text" name="name" value="Test 2" size="50" /></td>         
           <td><input type="text" name="year" value="1415" size="10" /></td>
           <td><input type="checkbox" name="readonly" value="1"  ></td>                    
           <td><input type="image" name="save_submit" src="image/save.png" height="13" alt="Submit" ></td>
         </tr>
         </form>

        <form action="" method="post">   
        <tr>                   
           <td><input type="text" name="id" value="3" size="4"/></td>
           <td><input type="text" name="name" value="Test 3" size="50" /></td>         
           <td><input type="text" name="year" value="1415" size="10" /></td>
           <td><input type="checkbox" name="readonly" value="1"  ></td>                    
           <td><input type="image" name="save_submit" src="image/save.png" height="13" alt="Submit" ></td>
         </tr>
         </form>

        <form action="" method="post">   
        <tr>                   
           <td><input type="text" name="id" value="4" size="4"/></td>
           <td><input type="text" name="name" size="50"/></td>          
           <td><input type="text" name="year" value="1415"  size="10"/></td>
           <td><input type="checkbox" name="readonly" value="1"></td>                    
           <td><input type="image" name="save_submit" src="image/savedisabled.png" height="13"  alt="Submit"></td>
         </tr>
         </form>                      
</tbody>
</table>

Answer 1

1. 您可以使用 parents('form')，但您似乎在寻找 sibling ？还有一个 siblings() 函数:$(this).siblings(); 您可以将选择器传递给函数以进一步缩小元素范围，例如 $(this).siblings('input:text'); 或 $(this).parents('form');
2. 其次使用 on() 而不是 bind()，bind() 是旧方法。 on() 也适用于动态插入的元素。
3. 不需要使用 prop()，也可以使用 attr()，您也可以将其附加到第一个 jquery 语句的末尾。含义:

$(this).parent().parent().children('td').children(':image').attr('src', 'image/savedisabled.png').attr ('禁用', '禁用');

或者更简洁:

$(this).parent().parent().children('td').children(':image').attr({ src:"image/savedisabled.png", disabled:"已禁用"});