Vô hiệu hóa gửi nếu đầu vào rỗng jquery

Question

Tuyên bố miễn trừ trách nhiệm: Tôi biết có một vài câu hỏi có chủ đề này và nó đã được đánh giá cao, mặc dù tôi cần hỗ trợ trong trường hợp cụ thể của tôi.

Tôi đang cố gắng kiểm tra xem các giá trị đầu vào có trống không trên khóa sau đó tắt nút gửi.

đoạn My HTML:

<div class='form'> 
    <form> 
    <div class='field'> 
     <label for="username">Username</label> 
     <input id="username" type="text" /> 
    </div> 
    <div class='field'> 
     <label for="password">Password</label> 
     <input id="password" type="password" /> 
    </div> 
    <div class='actions'> 
     <input type="submit" value="Login" /> 
    </div> 
    </form> 
</div> 

Tôi đã sử dụng câu trả lời ví dụ từ here với một số sửa đổi:

(function() { 
    $('.field input').keyup(function() { 

     var empty = false; 
     $('.field input').each(function() { 
      if ($(this).val() == '') { 
       empty = true; 
      } 
     }); 

     if (empty) { 
      $('.actions input').attr('disabled', true); 
     } else { 
      $('.actions input').attr('disabled', false); 
     } 
    }); 
})() 

Bất kỳ trợ giúp sẽ được đánh giá cao!

Answer 1

Tôi khuyên bạn nên tắt nút theo mặc định. Tôi cũng sẽ xem xét độ dài của .val(), không kiểm tra chuỗi rỗng. Cuối cùng, tôi nghĩ document.ready() được nhiều hơn nữa có thể đọc được hơn mã hiện tại của bạn: Đây là mã đầy đủ:

HTML

<div class='form'> 
    <form> 
    <div class='field'> 
     <label for="username">Username</label> 
     <input id="username" type="text" /> 
    </div> 
    <div class='field'> 
     <label for="password">Password</label> 
     <input id="password" type="password" /> 
    </div> 
    <div class='actions'> 
     <input type="submit" value="Login" disabled="disabled" /> 
    </div> 
    </form> 
</div>​ 

JS/jQuery

$(document).ready(function() { 
    $('.field input').keyup(function() { 

     var empty = false; 
     $('.field input').each(function() { 
      if ($(this).val().length == 0) { 
       empty = true; 
      } 
     }); 

     if (empty) { 
      $('.actions input').attr('disabled', 'disabled'); 
     } else { 
      $('.actions input').removeAttr('disabled'); 
     } 
    }); 
}); 

Dưới đây là a working fiddle.

Answer 2

Tôi sử dụng điều này trong dự án của mình và nó thành công.

$(document).ready(function() { 
    $('.field').keyup(function() { 

    var empty = false; 
    $('.field').each(function() { 
     if ($(this).val().length == 0) { 
      empty = true; 
     } 
    });     

    if (empty) { 
     $('.actions[type="submit"]').attr('disabled', 'disabled'); 
    } else { 
     $('.actions[type="submit"]').removeAttr('disabled'); 
    }     
    }); 
});