样式引导程序单选按钮看起来像具有表单验证功能的普通按钮

时间：2019-04-16 19:00:42

标签： javascript jquery html css bootstrap-4

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

另外，在不清楚的情况下，我也会使用bootstrap进行大多数样式设计。

// 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 个答案:

答案 0 :(得分：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 事件侦听器添加到您的引导样式按钮，以将其样式更改为单击后的填充按钮，并将其关联的常规单选按钮的checked属性设置为checked。同时对另一个按钮执行相反的操作：

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>

答案 1 :(得分：0)

您可以将收音机放置在标签内并删除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>

答案 2 :(得分：0)

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

尝试解决这个问题以添加验证，希望对您有所帮助。

相关问题
最新问题