样式引导单选按钮看起来像带有表单验证的普通按钮答案

【问题标题】：style bootstrap radio buttons to look like normal buttons with form validation样式引导单选按钮看起来像带有表单验证的普通按钮
【发布时间】：2019-04-16 19:00:42
【问题描述】：

我有这两个单选按钮，要求用户选择两个单选按钮之一。我一直在试图弄清楚如何设置单选按钮的样式，使其看起来更像常规按钮。我如何将这些单选按钮设置为看起来像普通按钮但同时保持单选按钮行为和表单验证？

此外，我的大部分样式都使用引导程序，以防不清楚。

// 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>

【问题讨论】：

这里有几个好主意：stackoverflow.com/questions/16242980/…

标签： javascript jquery html css bootstrap-4

【解决方案1】：

事情有点复杂，因为您想保留单选按钮的行为。如果我们只是隐藏常规单选按钮，用户就无法选择其中任何一个。

所以这里有一个麻烦的解决方法：首先，给常规的单选按钮和你的文本标签一个唯一的 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";

然后将 click 事件侦听器添加到您的引导样式按钮，以在单击后将其样式更改为填充按钮，并将其关联的常规单选按钮的选中属性设置为选中。同时对另一个按钮做相反的操作：

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】：

你可以把radio放在label里面，去掉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 &gt; [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】：

还有另一种解决问题的方法，不包括编写任何 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>

尝试使用它来添加验证，希望它有所帮助。

【讨论】：