javascript - 如何忽略 HTML 表单中的禁用问题，以便我能够在 HTML/JS 应用程序中使用 "Next"按钮进入下一节？

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 attribute selector检查每个问题是否有带有禁用属性的输入 (: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>