樣式引導單選按鈕看起來像帶有表單驗證的普通按鈕
[英]style bootstrap radio buttons to look like normal buttons with form validation
問題描述
我有這兩個單選按鈕，要求用戶選擇兩個單選按鈕之一。 我一直在嘗試弄清楚如何設置單選按鈕的樣式，使其看起來更像常規按鈕。 我如何設置這些單選按鈕的樣式使其看起來像普通按鈕但同時保持單選按鈕的行為和表單驗證？
此外，我的大部分樣式都使用引導程序，以防不清楚。
// Example starter JavaScript for disabling form submissions if there are invalid fields (function() { 'use strict'; window.addEventListener('load', function() { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })();
<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <form class="needs-validation" novalidate> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="save" required> <label class="form-check-label btn btn-outline-primary" for="save"> save </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="cancel" required> <label class="form-check-label btn btn-outline-danger" for="cancel"> cancel </label> <div class="invalid-feedback"> select one option </div> </div> </div> <button type="submit" name="signup_signup" class="btn btn-primary btn-block" aria-describedby="signup_notes">Submit</button> </form>
3 個解決方案
解決方案1
1 已采納 2019-04-16 19:34:35
事情有點復雜，因為你想保持單選按鈕的行為。 如果我們簡單地隱藏常規單選按鈕，用戶將無法選擇其中任何一個。
所以這里有一個麻煩的解決方法：首先，給常規的單選按鈕和你的文本標簽一個唯一的 id：
<input class="form-check-input" type="radio" name="choice" id="emailConsentRadioA" value="save" required>
<label class="form-check-label btn btn-outline-primary" for="save" id="saveButton">
<input class="form-check-input" type="radio" name="choice" id="emailConsentRadioB" value="cancel" required>
<label class="form-check-label btn btn-outline-danger" for="cancel" id="cancelButton">
接下來，隱藏常規單選按鈕：
document.getElementById("emailConsentRadioB").style.visibility="hidden";
document.getElementById("emailConsentRadioA").style.visibility="hidden";
之后，將點擊事件偵聽器添加到您的引導程序樣式按鈕，以在單擊后將其樣式更改為填充按鈕，並將其關聯的常規單選按鈕的選中屬性設置為選中。 同時對另一個按鈕做相反的操作：
function cancelPressed(e)
{
document.getElementById("saveButton").className="form-check-label btn btn-outline-primary";
document.getElementById(e.target.id).className="form-check-label btn btn-danger";
document.getElementById("emailConsentRadioB").checked=true;
}
function savePressed(e)
{
document.getElementById("cancelButton").className="form-check-label btn btn-outline-danger";
document.getElementById(e.target.id).className="form-check-label btn btn-primary";
document.getElementById("emailConsentRadioA").checked=true;
}
document.getElementById("saveButton").addEventListener("click",savePressed);
document.getElementById("cancelButton").addEventListener("click",cancelPressed);
這是完整的例子：
// Example starter JavaScript for disabling form submissions if there are invalid fields (function() { 'use strict'; window.addEventListener('load', function() { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })(); document.getElementById("emailConsentRadioB").style.visibility="hidden"; document.getElementById("emailConsentRadioA").style.visibility="hidden"; function cancelPressed(e) { document.getElementById("saveButton").className="form-check-label btn btn-outline-primary"; document.getElementById(e.target.id).className="form-check-label btn btn-danger"; document.getElementById("emailConsentRadioB").checked=true; } function savePressed(e) { document.getElementById("cancelButton").className="form-check-label btn btn-outline-danger"; document.getElementById(e.target.id).className="form-check-label btn btn-primary"; document.getElementById("emailConsentRadioA").checked=true; } document.getElementById("saveButton").addEventListener("click",savePressed); document.getElementById("cancelButton").addEventListener("click",cancelPressed);
<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <form class="needs-validation" novalidate> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="radio" name="choice" id="emailConsentRadioA" value="save" required> <label class="form-check-label btn btn-outline-primary" for="save" id="saveButton"> save </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="choice" id="emailConsentRadioB" value="cancel" required> <label class="form-check-label btn btn-outline-danger" for="cancel" id="cancelButton"> cancel </label> <div class="invalid-feedback"> select one option </div> </div> </div> <button type="submit" name="signup_signup" class="btn btn-primary btn-block" aria-describedby="signup_notes">Submit</button> </form>
解決方案2
0 2019-04-16 19:10:05
您可以將收音機放在標簽內並刪除for屬性，然后您可以使用此 css：
label > [type=radio] { display: none }
收音機仍將充當單選按鈕，只是不可見。
// Example starter JavaScript for disabling form submissions if there are invalid fields (function() { 'use strict'; window.addEventListener('load', function() { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })();
label > [type=radio] { display: none }
<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <form class="needs-validation" novalidate> <div class="form-group"> <div class="form-check"> <label class="form-check-label btn btn-outline-primary"> <input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="save" required> save </label> </div> <div class="form-check"> <label class="form-check-label btn btn-outline-danger"> <input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="cancel" required> cancel </label> <div class="invalid-feedback"> select one option </div> </div> </div> <button type="submit" name="signup_signup" class="btn btn-primary btn-block" aria-describedby="signup_notes">Submit</button> </form>
解決方案3
0 2020-08-20 19:57:35
還有另一種解決問題的方法，不包括編寫任何 Javascript！
<form class="needs-validation"> <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-outline-primary"> <input type="radio" name="area" autocomplete="off" value="save">save </label> <label class="btn btn-outline-danger"> <input type="radio" name="area" autocomplete="off" value="smoking">cancel </label> </div> </form>
嘗試使用它來添加驗證，希望它有所幫助。
javascript 驗證表單中的單選按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.