根據復選框禁用/啟用按鈕
[英]Disabling/Enabling a button as per a checkbox
問題描述
我一直在嘗試制作一種形式，其中選中復選框時，該按鈕處於啟用狀態。 我嘗試了jquery和javascript，但它們沒有幫助。
格式的HTML代碼：
<form>
Name*: <input type="text" size="20" name="name" required /> <br /><br />
Surname: <input type="text" size="20" /> <br />
<br /><br />
Mobile number: <input type="tel" size="15" /> <br /><br />
E-mail id*: <input type="Email" size="30" name="usr_id" required /> <br /><br />
Password*: <input type="Password" size="30" id="pw1" required /> <br /><br />
Confirm Password*: <input type="password" size="30" id="pw2" required /> <br /><br /><br /><br />
I accept the terms and conditions <input class="chk" type="checkbox" id="tc" /><br /><br />
<input type="submit" id="btn" class="btn btn-lg btn-primary" value="Sign up" onclick="form_function()"/>
</form>
Javascript-form_function：
function form_function(){
var pw = document.getElementById(pw1).value;
var conf_pw = document.getElementById(pw2).value;
if (pw == conf_pw){
window.location.href('http://www.google.com/sgn_up_conf');
} else{
if (conf_pw == ""){
window.alert("Please confirm your password");
} else {
if (pw == conf_pw == ""){
window.alert("Please enter a password");
} else {
if (pw == "") {
window.alert("How can you confirm a password if you have not written anything?");
} else {
window.alert("Please make sure that you have confirmed the password properly");
}
}
}
}
};
有條件禁用按鈕的Javascript：
$('#btn').prop("disabled", true);
$('#tc').click(function() {
if ($(this).is(':checked')) {
$('#btn').prop("disabled", false);
} else {
$('#btn').attr('disabled',true);}
}
});
form_function（）工作正常，但復選框按鈕關系不正常。 即使未選中該復選框，該按鈕也處於啟用狀態，並且不會出現form_function（）。
*在此新編輯中，我放置了更新的form_function（），這一次，我包括了兩個密碼字段的所有可能。
6 個解決方案
解決方案1
2 2017-09-03 04:40:36
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <form> Name*: <input type="text" size="20" name="name" required /> <br /><br /> Surname: <input type="text" size="20" /> <br /> <br /><br /> Mobile number: <input type="tel" size="15" /> <br /><br /> E-mail id*: <input type="Email" size="30" name="usr_id" required /> <br /><br /> Password*: <input type="Password" size="30" id="pw1" required /> <br /><br /> Confirm Password*: <input type="password" size="30" id="pw2" required /> <br /><br /><br /><br /> I accept the terms and conditions <input class="chk" type="checkbox" id="tc" /><br /><br /> <input type="submit" id="btn" class="btn btn-lg btn-primary" value="Sign up" disabled="disabled" onclick="form_function()"/> </form> </body> <script> function form_function(){ var pw1 = document.getElementById('pw1').value; var pw2 = document.getElementById('pw2').value; if (pw1 == pw2){ document.getElementById('btn').onclick = window.location.href("www.google.co.in/sgn_conf"); } else { document.getElementById('btn').onclick = window.alert("Please make sure that both the password fields have the same text"); } } $("#tc").change(function () { if (this.checked) { $("#btn").prop("disabled", false); } else { $("#btn").prop("disabled", true); } }); </script> </html>
檢查代碼段。
解決方案2
2 已采納 2017-09-03 05:05:32
我建議您調整代碼以使用更簡單的設置。 我將標記更改為更常規的標記，不是特別要求，我刪除了所有<br />並使用CSS來分隔內容。
至於為什么您的代碼不起作用？
- 它有語法錯誤。
- 使用CLICK事件，在第一次單擊時將其選中，這是可以的，但是，如果您使用鍵盤進行檢查/取消選中，則不會觸發，因此您應使用change事件來確保考慮到可以更改它的操作。
- 您在href和奇數事件掛鈎方面遇到問題，您確實想設置它。
window.location.href = "www.google.co.in/sgn_conf";
$('#btn').on('click', function() { if ($('#pw1').val() == $('#pw2').val()) { window.location.href = "www.google.co.in/sgn_conf"; } else { window.alert("Please make sure that both the password fields have the same text"); } }).prop("disabled", true); $('#tc').on('change', function() { $('#btn').prop("disabled", !this.checked); });
form div { margin-bottom: 1em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form> <div> <label> Name*: <input type="text" size="20" name="name" required /> </label> </div> <div> <label>Surname: <input type="text" size="20" /> </label> </div> <div> <label>Mobile number: <input type="tel" size="15" /> </label> </div> <div> <label>E-mail id*: <input type="Email" size="30" name="usr_id" required /> </label> </div> <div> <label>Password*: <input type="Password" size="30" id="pw1" required /> </label> </div> <div> <label>Confirm Password*: <input type="password" size="30" id="pw2" required /> </label> </div> <div> <label>I accept the terms and conditions <input class="chk" type="checkbox" id="tc" /> </label> </div> <div> <input type="submit" id="btn" class="btn btn-lg btn-primary" value="Sign up" /> </div> </form>
解決方案3
1 2017-09-03 04:27:54
可能是您多了一個}嗎？
...
$('#btn').attr('disabled',true);}
}
); // < --- remove }
檢查以下工作示例：
https://codepen.io/nilestanner/pen/wqOaaO
我建議您使用具有插入或錯誤檢查功能的IDE，這種問題更容易調試！
解決方案4
0 2017-09-03 04:29:21
您額外使用了“}”
$('#btn').prop("disabled", true);
$('#tc').on('click',function() {
if ($(this).is(':checked')) {
$('#btn').prop("disabled", false);
} else {
$('#btn').attr('disabled',true);
}
});
解決方案5
0 2017-09-03 04:33:00
嘗試這個
$("#btn").prop('disabled', true);//disable
$('#tc').click(function() {
if($(this).is(':checked'))
$("#btn").prop('disabled', true);//enable
else
$("#btn").prop('disabled', true);//disable
});
解決方案6
0 2017-09-03 04:45:37
您還有一個額外的結尾括號。
$('#btn').prop("disabled", true);
$('#tc').click(function() {
if ($(this).is(':checked')) {
$('#btn').prop("disabled", false);
} else {
$('#btn').attr('disabled',true);} // <--
}
});
無法根據復選框啟用/禁用提交按鈕（JavaScript）
[英]Trouble enabling/disabling submit button according to checkbox (JavaScript)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.