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

您可以使用父母（'表单'），但看起来您正在尝试找到兄弟姐妹？还有一个兄弟姐妹（）函数： $(this).siblings();您可以将选择器传递给函数以进一步缩小元素，例如使用$(this).siblings('input:text');或$(this).parents('form');
其次使用on（）而不是bind（），bind（）是执行它的旧方法。 on（）也适用于动态插入的元素。
不需要使用prop（），也可以使用attr（），也可以将它附加到第一个jquery语句的末尾。含义：

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

甚至更简洁：

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

Answer 2

我想给你的表格一点尝试。我让它工作得很好^^。我给了按钮一个颜色，以指示它是否有效。我也冒昧地改变了一些其他属性（你可以根据自己的喜好改变它）。我假设加载页面时相关的文本框都是空的，并将它们全部设置为禁用按钮。

在此代码中更改每个文本框的条件应该很容易。添加更多文本框进行检查也应该是不言自明的。

阅读代码/ JSFiddle中的注释以获取更多解释。如果您有更多问题，请询问^^。

<强> HTML

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

JQuery（更容易阅读JSFiddle）

$(document).ready(
    function() {
        $("input[name='save_submit']")
            .css({'background-color': 'red', 'cursor': 'default'})/*Just for visualising that all buttons are disabled. Change to your personal taste*/
            .attr('disabled', true);/*disabling all submitbuttons*/
        $(':text').on('keyup'/*Using keyup so the event triggers after typing something*/, function(){                       
            var ValueName = $(this).parent('td').parent('tr').children('td').children('input[name="name"]').val();/*Get the value of the appropriate "name"-input*/
            var ValueYear = $(this).parent('td').parent('tr').children('td').children('input[name="year"]').val();/*Get the value of the appropriate "year"-input*/
            if(ValueName !== "" && ValueYear !== "") /*check  if all variables have content*/{$(this).parent('td').parent('tr').children('td').children('input[name="save_submit"]').css({'background-color': 'green', 'cursor': 'pointer'}).attr('disabled', false);}/*Change submit button properties if all the input-items contain information*/
            else{$(this).parent('td').parent('tr').children('td').children('input[name="save_submit"]').css({'background-color': 'red', 'cursor': 'default'}).attr('disabled', true); }/*Change submit button properties if NOT all the input-items contain information*/
        }); //End keyup
    }); // End ready

JSFiddle (read comments and try it out)

使用Jquery验证所有表兄输入元素

2 个答案: