переключатели в стиле начальной загрузки выглядят как обычные кнопки с проверкой формы - PullRequest
Новая
       1

переключатели в стиле начальной загрузки выглядят как обычные кнопки с проверкой формы

1 голос
/ 16 апреля 2019

У меня есть эти две радиокнопки, которые требуют от пользователя выбрать одну из двух радиокнопок. Я пытался понять, как оформить радио-кнопки так, чтобы они больше походили на обычные кнопки. Как я могу стилизовать эти переключатели так, чтобы они выглядели как обычные кнопки, но сохранить поведение переключателей и проверку формы?

Также я использую бутстрап для большей части моего стиля, если неясно. 

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

Ответы [ 2 ]

1 голос
/ 16 апреля 2019

Все немного сложнее, так как вы хотите сохранить поведение переключателя.Если мы просто скрываем обычные переключатели, пользователь не может выбрать ни одну из них.

Итак, вот громоздкий обходной путь: во-первых, присвойте обычным переключателям и текстовым меткам уникальный идентификатор: 

<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>
0 голосов
/ 16 апреля 2019

Вы можете поместить радио внутри метки и удалить атрибут 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...