如何忽略 HTML 表单中的禁用问题，以便我能够使用 HTML/JS 应用程序中的“下一步”按钮进入下一部分？

Question

我创建了一个表单，我们在其中向用户提出了一些问题。 有几个部分，每个部分有 5 到 10 个问题。 用户可以使用 NA 按钮禁用问题。

但他们需要回答剩下的问题。 我可以创建所有内容，但“ Next按钮有问题。 由于禁用问题，我无法转到下一部分。 它也要求回答禁用问题。

下面是代码。 另外，如果用户单击NA按钮，我想删除任何给定的答案。

 $(document).ready(function() { let ctr = 1; $('.answers').each(function(index) { let i = index + 1 let html = ` <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="1"> <label class="form-check-label" for="gridRadios${ctr}"> Never</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="2"> <label class="form-check-label" for="gridRadios${ctr}">Rarely</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="3"> <label class="form-check-label" for="gridRadios${ctr}">Occasionally</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="4"> <label class="form-check-label" for="gridRadios${ctr}">Often</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="5"> <label class="form-check-label" for="gridRadios${ctr}">Always</label> </div> <div class="form-group"> <input type="button" name="q${i}Remark" value="Remark" onclick="onButtonClick(${i})" /> <input class="hide" type="text" id="textInput${i}" value="" oninput="updateTextBox()" /> <p>Remaining Characters: <span id="chars-left">100</span></p> </div> <div class="form-group"> <button name="disable${i}" id="na${i}" class='btn-na'>N/A</button> </div> ` $(this).html(html); ctr++; }) $(".btn-na").click(function() { let n = $('.answers.disabled').length if (n >= 3) { alert('You can only disable 3'); return } $(this).closest('.answers').find("input").attr('disabled', true); $(this).closest('.answers').addClass('disabled') }) }); $('.btnNextS1').click(function() { if ($('div.row1:not(:has(:radio:checked))').length) { $('div.row1:not(:has(:radio:checked))').parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>"); } else { // e.stopPropagation(); $('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click'); } });

 <div class="section-1-questions"> <div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br> <fieldset class="form-group"> <div class="row1"> <div class="question1"> <legend id="q1" class="col-form-label col-sm-8 pt-0"><b>1) Question 1</b></legend> <div class="col-sm-10 answers"> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q2" class="col-form-label col-sm-8 pt-3"><b>2) Question 2</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q3" class="col-form-label col-sm-8 pt-3"><b>3) Question 3</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q4" class="col-form-label col-sm-8 pt-3"><b>4) Question 4</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q5" class="col-form-label col-sm-8 pt-3"><b>5) QUESTION 5</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <div class="form-group"> <label for="remarks"><b>Remarks / Observations </b></label> <input type="name" class="form-control" name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations"> <small id="nameHelp" class="form-text text-muted">Please enter your Remarks / Observations about these questions.</small> </div> </div> <br> <a class="btn btn-primary btnPrevious">Previous</a> <a class="btn btn-primary btnNextS1">Next</a> </div>

Answer 1

只需简单地更改选择器即可完成工作。

:not(:has(input[disabled]))

将您当前的无效问题选择器更改为：

$('div.row1:not(:has(:radio:checked))')

至：

$('div.row1:not(:has(:radio:checked)):not(:has(input[disabled]))')

这个选择器使用 CSS 属性选择器来检查每个问题是否有一个带有 disabled 属性的输入（ :has(input[disabled]) ）。

 $(document).ready(function() { let ctr = 1; $('.answers').each(function(index) { let i = index + 1 let html = ` <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="1"> <label class="form-check-label" for="gridRadios${ctr}"> Never</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="2"> <label class="form-check-label" for="gridRadios${ctr}">Rarely</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="3"> <label class="form-check-label" for="gridRadios${ctr}">Occasionally</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="4"> <label class="form-check-label" for="gridRadios${ctr}">Often</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="5"> <label class="form-check-label" for="gridRadios${ctr}">Always</label> </div> <div class="form-group"> <input type="button" name="q${i}Remark" value="Remark" onclick="onButtonClick(${i})" /> <input class="hide" type="text" id="textInput${i}" value="" oninput="updateTextBox()" /> <p>Remaining Characters: <span id="chars-left">100</span></p> </div> <div class="form-group"> <button name="disable${i}" id="na${i}" class='btn-na'>N/A</button> </div> ` $(this).html(html); ctr++; }) $(".btn-na").click(function() { let n = $('.answers.disabled').length if (n >= 3) { alert('You can only disable 3'); return } $(this).closest('.answers').find("input").attr('disabled', true); $(this).closest('.answers').addClass('disabled') }) }); $('.btnNextS1').click(function() { if ($('div.row1:not(:has(:radio:checked)):not(:has(input[disabled]))').length) { $('div.row1:not(:has(:radio:checked)):not(:has(input[disabled]))').parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>"); } else { // e.stopPropagation(); console.log('valid'); $('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click'); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="section-1-questions"> <div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br> <fieldset class="form-group"> <div class="row1"> <div class="question1"> <legend id="q1" class="col-form-label col-sm-8 pt-0"><b>1) Question 1</b></legend> <div class="col-sm-10 answers"> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q2" class="col-form-label col-sm-8 pt-3"><b>2) Question 2</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q3" class="col-form-label col-sm-8 pt-3"><b>3) Question 3</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q4" class="col-form-label col-sm-8 pt-3"><b>4) Question 4</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q5" class="col-form-label col-sm-8 pt-3"><b>5) QUESTION 5</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <div class="form-group"> <label for="remarks"><b>Remarks / Observations </b></label> <input type="name" class="form-control" name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations"> <small id="nameHelp" class="form-text text-muted">Please enter your Remarks / Observations about these questions.</small> </div> </div> <br> <a class="btn btn-primary btnPrevious">Previous</a> <a class="btn btn-primary btnNextS1">Next</a> </div>

Answer 2

你好吗？ 我们可以用隐藏标签修复它。 现在我将为您分享代码。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <title>Document</title> </head> <body> <div class="section-1-questions"> <div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br> <fieldset class="form-group"> <div class="row1"> <div class="question1"> <legend id="q1" class="col-form-label col-sm-8 pt-0"><b>1) Question 1</b></legend> <div class="col-sm-10 answers"> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q2" class="col-form-label col-sm-8 pt-3"><b>2) Question 2</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q3" class="col-form-label col-sm-8 pt-3"><b>3) Question 3</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q4" class="col-form-label col-sm-8 pt-3"><b>4) Question 4</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q5" class="col-form-label col-sm-8 pt-3"><b>5) QUESTION 5</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <div class="form-group"> <label for="remarks"><b>Remarks / Observations </b></label> <input type="name" class="form-control" name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations"> <small id="nameHelp" class="form-text text-muted">Please enter your Remarks / Observations about these questions.</small> </div> </div> <br> <a class="btn btn-primary btnPrevious">Previous</a> <a class="btn btn-primary btnNextS1">Next</a> </div> </body> <script> $(document).ready(function() { let ctr = 1; $('.answers').each(function(index) { let i = index + 1 let html = ` <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="1"> <label class="form-check-label" for="gridRadios${ctr}"> Never</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="2"> <label class="form-check-label" for="gridRadios${ctr}">Rarely</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="3"> <label class="form-check-label" for="gridRadios${ctr}">Occasionally</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="4"> <label class="form-check-label" for="gridRadios${ctr}">Often</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="5"> <label class="form-check-label" for="gridRadios${ctr}">Always</label> </div> <div class="form-group"> <input type="button" name="q${i}Remark" value="Remark" onclick="onButtonClick(${i})" /> <input class="hide" type="text" id="textInput${i}" value="" oninput="updateTextBox()" /> <p>Remaining Characters: <span id="chars-left">100</span></p> </div> <div class="form-group"> <button name="disable${i}" id="na${i}" class='btn-na'>N/A</button> <input class="form-check-input" type="radio" name="na${i}" id="gridRadios${ctr}" value="6" hidden> </div> ` $(this).html(html); ctr++; }) $(".btn-na").click(function() { let n = $('.answers.disabled').length if (n >= 3) { alert('You can only disable 3'); return } $(this).closest('.answers').find("input").attr('disabled', true); $(this).closest('.answers').find("input:radio[name="+$(this).attr('id')+"]").prop('checked',true); $(this).closest('.answers').addClass('disabled') }) }); $('.btnNextS1').click(function() { if ($('div.row1:not(:has(:radio:checked))').length ) { $('div.row1:not(:has(:radio:checked))').parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>"); } else { // e.stopPropagation(); $('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click'); } }); </script> </html>

Answer 3

这有点混乱，所以我为你重写了逻辑：

$('.btnNextS1').click(function() {
//on click
  $(".validation").remove()
  // reset all validation added previously

  document.querySelectorAll(".answers").forEach(a => {
    // for each answers
    if (!a.classList.contains("disabled") && $(a).find(":radio:checked").length == 0) {
      // for each if it does not have disabled class and has no radios checked
      $(a).parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>");
      // add validation massage to that particular anwser
    }
  })

  if ($(".validation").length === 0) {
    // if no validation errors are present continue
    $('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click');
    console.log("triger a")
  }


});

仅当未检查无线电且未检查 N/A 时才会添加警告消息，如果一切正常，则会删除警告消息。

它还会检查是否存在任何警告消息，如果没有则触发下一次点击。

 $(document).ready(function() { let ctr = 1; $('.answers').each(function(index) { let i = index + 1 let html = ` <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="1"> <label class="form-check-label" for="gridRadios${ctr}"> Never</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="2"> <label class="form-check-label" for="gridRadios${ctr}">Rarely</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="3"> <label class="form-check-label" for="gridRadios${ctr}">Occasionally</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="4"> <label class="form-check-label" for="gridRadios${ctr}">Often</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="5"> <label class="form-check-label" for="gridRadios${ctr}">Always</label> </div> <div class="form-group"> <input type="button" name="q${i}Remark" value="Remark" onclick="onButtonClick(${i})" /> <input class="hide" type="text" id="textInput${i}" value="" oninput="updateTextBox()" /> <p>Remaining Characters: <span id="chars-left">100</span></p> </div> <div class="form-group"> <button name="disable${i}" id="na${i}" class='btn-na'>N/A</button> </div> ` $(this).html(html); ctr++; }) $(".btn-na").click(function() { let n = $('.answers.disabled').length if (n >= 3) { alert('You can only disable 3'); return } $(this).closest('.answers').find("input").attr('disabled', true); $(this).closest('.answers').addClass('disabled') }) }); $('.btnNextS1').click(function() { $(".validation").remove() // reset all validation added document.querySelectorAll(".answers").forEach(a => { // for each answer if (!a.classList.contains("disabled") && $(a).find(":radio:checked").length == 0) { // if it does not have disabled class and has no radios checked $(a).parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>"); // add validation massage } }) if ($(".validation").length === 0) { // if no validation errros are present continew $('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click'); console.log("triger a") } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="section-1-questions"> <div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br> <fieldset class="form-group"> <div class="row1"> <div class="question1"> <legend id="q1" class="col-form-label col-sm-8 pt-0"><b>1) Question 1</b></legend> <div class="col-sm-10 answers"> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q2" class="col-form-label col-sm-8 pt-3"><b>2) Question 2</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q3" class="col-form-label col-sm-8 pt-3"><b>3) Question 3</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q4" class="col-form-label col-sm-8 pt-3"><b>4) Question 4</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q5" class="col-form-label col-sm-8 pt-3"><b>5) QUESTION 5</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <div class="form-group"> <label for="remarks"><b>Remarks / Observations </b></label> <input type="name" class="form-control" name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations"> <small id="nameHelp" class="form-text text-muted">Please enter your Remarks / Observations about these questions.</small> </div> </div> <br> <a class="btn btn-primary btnPrevious">Previous</a> <a class="btn btn-primary btnNextS1">Next</a> </div>