проверить все элементы входа двоюродного брата с помощью 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)