在 bootstrap 模态中完成所有字段之前，如何禁用提交按钮？

Question

在启用模式中的提交按钮之前，如何检查输入字段是否已填写？我还想弄清楚如何在打开按钮后调用我的函数。我尝试在点击时调用一个函数，但它不起作用。

我不确定如何实现检查输入字段的功能以及如何在模式打开时调用该功能

function checkModal() {}

function validate() {
  if ($('#id').val() &&
    $('#fname').val() &&
    $('#lname').val() &&
    $('#sub1').val() &&
    $('#sub2').val() &&
    $('#sub3').val() &&
    $('#sub4').val() &&
    $('#sub5').val() &&
    $('#grade1').val() &&
    $('#grade2').val() &&
    $('#grade3').val() &&
    $('#grade4').val() &&
    $('#grade5').val().length > 0) {
    // disable bootstrap button
  }
}

$(document).ready(function() {
  validate();
  $('#id, #lname, #fname, #sub1, #sub2, #sub3, #sub4, #sub5, #grade1, #grade2, #grade3, #grade4, #grade5').change(validate);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title" id="exampleModalLabel">New Student Form</h2>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
      </div>
      <div class="modal-body">

        <h6>ID</h6>
        <input type="text" id="id">
        <h6>Lastname</h6>
        <input type="text" id="lname">
        <h6>Firstname</h6>
        <input type="text" id="fname">
        <h6>Course</h6>
        <select name="courses" id="courses">
          <option value="BS Information Technology">BS Information Technology</option>
          <option value="BS Information Systems">BS Information Systems</option>
          <option value="BS Computer Scicence">BS Computer Scicence</option>
          <option value="BS Data Science">BS Data Science</option>
        </select>

        <hr>

        <div class="container1">
          <h6>Subject 1</h6>
          <input type="text" id="sub1" required>

          <h6>Subject 2</h6>
          <input type="text" id="sub2" required>

          <h6>Subject 3</h6>
          <input type="text" id="sub3">

          <h6>Subject 4</h6>
          <input type="text" id="sub4">

          <h6>Subject 5</h6>
          <input type="text" id="sub5">
        </div>

        <div class="container2">
          <h6>Grade</h6>
          <input type="text" id="grade1">

          <h6>Grade</h6>
          <input type="text" id="grade2">

          <h6>Grade</h6>
          <input type="text" id="grade3">

          <h6>Grade</h6>
          <input type="text" id="grade4">

          <h6>Grade</h6>
          <input type="text" id="grade5">

        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" aria-disabled="true" onclick="checkModal()" id="add_student">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

对于残疾人，您可以使用 prop("disabled", true); 到您的按钮。试试下面的代码。

if (
    $('#id').val() == '' ||
    $('#fname').val() == '' ||
    $('#lname').val() == '' ||
    $('#sub1').val() == '' ||
    $('#sub2').val() == '' ||
    $('#sub3').val() == '' ||
    $('#sub4').val() == '' ||
    $('#sub5').val() == '' ||
    $('#grade1').val() == '' ||
    $('#grade2').val() == '' ||
    $('#grade3').val() == '' ||
    $('#grade4').val() == '' ||
    $('#grade5').val() == ''
){
    $('#add_student').prop("disabled",true);
}

Answer 2

给你所有的输入一个共同的 class 比如 modal__inputs

// Select all inputs
const all_inputs = document.querySelectorAll(".modal__inputs");
// Set disabled variable false
let disabled = false;

// Map through all the inputs, 
//if any input is empty the disabled variable will be set to true

for(let i=0;i<all_inputs.length;i++){
  if(all_inputs[i].value.trim() === ""){
    disabled = true;
    break;
  }
}

// Set button disabled
const button = document.getElementById("add_button");
button.disabled = disabled;

Answer 3

您可以找到所有空的，如果找到则禁用

const empty = $('.modal-body :input')
  .filter(function() { 
    return this.value.trim() === "" 
  }).length>0;
$('#add_student').prop('disabled',empty);

也许从头开始：

$(function() {
  const $inputs = $('.modal-body :input');
  const $addStudent = $('#add_student');
  $inputs.on('change',function() {
    const empty = $inputs
      .filter(function() { return this.value.trim() === "" })
      .length>0;
    $addStudent.prop('disabled',empty);
  });
})

在 bootstrap 模态中完成所有字段之前，如何禁用提交按钮？

How do I disable the submit button until all fields are complete in a bootstrap modal?

html

javascript

jquery

bootstrap-modal