驗證所有使用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. 您可以使用家長（「形式」），但它看起來像你試圖尋找兄弟姐妹？還有一個兄弟姐妹（）函數： $(this).siblings();可以在選擇器傳遞給一個函數進一步窄元素，如用$(this).siblings('input:text');或$(this).parents('form');
2. 其次使用上（）而不是綁定（），綁定（）是舊這樣做的方式。 on（）也適用於動態插入的元素。
3. 不需要使用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)