Question

我有一个带有两个复选框和一个按钮的简单表单。默认情况下应该禁用该按钮，并且只有在选中两个（或两个）复选框中的任何一个时才会变为可单击。然后单击的按钮应显示模式表单以验证用户的ID。请帮我解决一下。

<!-- simple form -->
<input type="checkbox" name="option1" id="option1" value="Request Info"> option 1<br>
<input type="checkbox" name="option2" id="option2" value="Delete Info"> option 2
<button id="myBtn">Submit</button>

<!-- modal form -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>ID Verification</h2>
    <p><input type="text" name="client-fname" placeholder="First Name"></p> 
    <p><input type="text" name="client-sname" placeholder="Last Name"></p>
    <p><input type="email" name="client-email" placeholder="Email"></p> 
    <p><input type="tel" name="client-phone" placeholder="Phone Number"></p>
    <p><input type="date" name="client-dob" placeholder="Date of Birth"></p>
    <p><button id="myBtnModal">Send</button></p>
  </div>                        
</div>

<!-- Modal code -->
<script>

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
 span.onclick = function() {
     modal.style.display = "none";
 }

// When the user clicks anywhere outside of the modal, close it
 window.onclick = function(event) {
     if (event.target == modal) {
         modal.style.display = "none";
     }
 }
 </script>

Answer 1

首先通过html

中的“禁用”标志禁用该按钮

<button id="myBtn" disabled>Submit</button>

然后当用户触发模态时按下按钮启用按钮：

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
    document.getElementById("myBtn").disabled = false;
}

Answer 2

您可以尝试以下方式：

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get all the check boxes
var chk = document.querySelectorAll('input[type=checkbox]');
chk.forEach(function(c){
  // Add change event to checkboxes
  c.addEventListener('change', function(){
    // Get the length of checked checkbox
    var len=document.querySelectorAll('input[type=checkbox]:checked').length;
    if(len >= 1) btn.disabled = false; // enable button
    else {
      btn.disabled = true; // disable button
      modal.style.display = "none"; // hide modal
    }
  });
});

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// Hide modal initially
modal.style.display = "none";
// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
 span.onclick = function() {
     modal.style.display = "none";
 }

// When the user clicks anywhere outside of the modal, close it
 window.onclick = function(event) {
     if (event.target == modal) {
         modal.style.display = "none";
     }
 }

<input type="checkbox" name="option1" id="option1" value="Request Info"> option 1<br>
<input type="checkbox" name="option2" id="option2" value="Delete Info"> option 2
<button id="myBtn" disabled>Submit</button>

<!-- modal form -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>ID Verification</h2>
    <p><input type="text" name="client-fname" placeholder="First Name"></p> 
    <p><input type="text" name="client-sname" placeholder="Last Name"></p>
    <p><input type="email" name="client-email" placeholder="Email"></p> 
    <p><input type="tel" name="client-phone" placeholder="Phone Number"></p>
    <p><input type="date" name="client-dob" placeholder="Date of Birth"></p>
    <p><button id="myBtnModal" disabled>Send</button></p>
  </div>    
</div>                    
<!-- Modal code -->

仅在选中其中一个或两个复选框时单击按钮，并在单击按钮时单击模式

2 个答案: