對於每個表單鍵盤

Question

我在一個頁面上有多個表單，我想要禁用它們的提交按鈕，直到它們被填充。

它看起來像這樣：

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

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

 
    if (empty) { 
 
    $('#register').attr('disabled', 'disabled'); 
 
    } else { 
 
    $('#register').removeAttr('disabled'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" id="user_input" name="username" placeholder="name" /><br /> 
 
    <input type="submit" id="register" value="Register" disabled="disabled" /> 
 
</form> 
 
<form> 
 
    <input type="text" id="user_input" name="username" placeholder="name" /><br /> 
 
    <input type="submit" id="register" value="Register" disabled="disabled" /> 
 
</form>

我想換都用$（ 「形式」）每個（函數（），使每個窗體是獨立的，但事實並非如此。工作我的英語不是很好，我真的是一個jquery新手，所以任何幫助將不勝感激 http://jsfiddle.net/qKG5F/3200/

Answer 1

首先，你必須注意的是，id屬性應該是唯一的。因此，而不是給出一個相同id多個HTML標籤，你必須使用class屬性我下面做：

id="user_input" 

應該

class="user_input" 

後，當你使用選擇$('form input')你沒有選擇與input相關的表單/輸入會觸發keyup事件。所以，你必須達到與此相關的輸入作爲第一步的父母，然後瞄準所有的孩子投入，像這樣：

$(this).parent().find("input") 

與寄存器輸入同樣的事情：

$(this).parent().find('.register') 

最後這裏是一個DEMO：

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

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

 
    if (empty) { 
 
     $(this).parent().find('.register').attr('disabled', 'disabled'); 
 
    } else { 
 
     $(this).parent().find('.register').removeAttr('disabled'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" class="user_input" name="username" placeholder="name" /><br /> 
 
    <input type="submit" class="register" value="Register" disabled="disabled" /> 
 
</form> 
 
<form> 
 
    <input type="text" class="user_input" name="username" placeholder="name" /><br /> 
 
    <input type="submit" class="register" value="Register" disabled="disabled" /> 
 
</form>

Answer 2

問題是，你使用相同的id爲兩個按鈕。 ID或使ID類所有的

<form> 
<input type="text" id="user_input_1" name="username" placeholder="name" /><br /> 
<input type="submit" id="register_1" value="Register" disabled="disabled" /> 
</form> 
<form> 
<input type="text" id="user_input_2" name="username" placeholder="name" /><br /> 
<input type="submit" id="register_2" value="Register" disabled="disabled" /> 
</form> 
(function() { 
$('#user_input_1').keyup(function() { 
    var empty = false; 
     if ($(this).val() == '') { 
      empty = true; 
     } 
    if (empty) { 
     $('#register_1').attr('disabled', 'disabled'); 
    } else { 
     $('#register_1').removeAttr('disabled'); 
    } 
}); 
$('#user_input_2').keyup(function() { 
    var empty = false; 
       if ($(this).val() == '') { 
      empty = true; 
     } 
    if (empty) { 
     $('#register_2').attr('disabled', 'disabled'); 
    } else { 
     $('#register_2').removeAttr('disabled'); 
    } 
}); 
})() 

Answer 3

你應該考慮keyupchangekeypress個blur事件啓用/禁用按鈕：

required = function(fields) { 
 
    console.clear(); 
 
    var valid = true; 
 
    fields.each(function() { // iterate all 
 
    var $this = $(this); 
 
    if ((($this.is(':text') || $this.is('textarea')) && !$this.val())) { 
 
     valid = false; 
 
    } 
 
    }); 
 
    return valid; 
 
} 
 

 
validateRealTime = function() { 
 
    var fields = $("form :input"); 
 
    fields.on('keyup change keypress blur', function() { 
 
    if (required(fields)) { 
 
     { 
 
     $("#register").prop('disabled', false); 
 
     } 
 
    } else { 
 
     { 
 
     $("#register").prop('disabled', true); 
 
     } 
 
    } 
 
    }); 
 
} 
 

 
validateRealTime();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    First name<br /> 
 
    <input type="text" id="user_input" name="firstname" /><br /> Name 
 
    <br /> 
 
    <input type="name" id="name_input" name="name" /><br /> Email<br /> 
 
    <input type="email" id="email_input" name="email" /><br /> 
 
    <br/> Your Message 
 
    <textarea name="your_message" id="your_message"></textarea> 
 
    <br> 
 

 
    <input type="submit" id="register" value="Submit" disabled="disabled" /> 
 

 
</form>