无法制作双向按钮（第一次单击使问题在第二次启用时禁用）

Posted

技术标签:

【中文标题】无法制作双向按钮（第一次单击使问题在第二次启用时禁用）【英文标题】：Not able to make two way button (On first click make question disable in 2nd make enable ) 【发布时间】：2022-01-18 12:10:28 【问题描述】：

我已经为 NA 按钮编写了一个代码，它在单击后禁用问题。但是如果用户错误地单击它，我无法在第二次单击后启用它。

下面是按钮的代码。

 $(".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')
  )
);

以上是我为此编写的 Jquery。

JS :-

    $(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$iRemark" 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');
  
);

HTML :-

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

【问题讨论】：

您可以使用toggleClass打开和关闭课程：api.jquery.com/toggleclass 试试$(this).closest('.answers').find("input").prop('disabled', !$(this).closest('.answers').find("input").is(":disabled")); @CarstenLøvboAndersen 这个解决方案的问题是它不会在不回答问题的情况下继续前进 【参考方案1】：

我会更改 2 件事情来解决这个问题。

1：$('.answers.disabled').not($(this).closest('.answers')).length

^这会计算所有被禁用的.answers，但不包括您单击的那个。这将确保我们可以在输入被禁用时启用它。

2：$(this).closest('.answers').find("input").attr('disabled', !$(this).closest('.answers').find("input").is(":disabled")); $(this).closest('.answers').toggleClass('disabled')

^这将根据是否禁用或ntoe在禁用和启用之间切换。

结果

  $(".btn-na").click(function() 
    let n = $('.answers.disabled').not($(this).closest('.answers')).length
    if (n >= 3) 
      alert('You can only disable 3');
      return
    
    $(this).closest('.answers').find("input").attr('disabled', !$(this).closest('.answers').find("input").is(":disabled"));
    $(this).closest('.answers').toggleClass('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$iRemark" 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').not($(this).closest('.answers')).length
    if (n >= 3) 
      alert('You can only disable 3');
      return
    
    $(this).closest('.answers').find("input").attr('disabled', !$(this).closest('.answers').find("input").is(":disabled"));
    $(this).closest('.answers').toggleClass('disabled')
  )
  $('.btnNextS1').click(function() 
    $("div.row1").each(function() 
      $(this).parent().next(".validation").remove()
      if ($(this).has("input:checked").length > 0)  else 
        $(this).parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>");
      
    )
    if ($("div.row1").filter(function() 
        return $(this).parent().next().hasClass("validation")
      ).length == 0) 
      //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>

【讨论】：

你可以检查你的演示如果你点击 NA 它不会前进并显示错误@CarstenLøvboAndersen 如果 (($(this).has("input:checked").length > 0) || ($(this). has("input[disabled]").length > 0) )

以上是关于无法制作双向按钮（第一次单击使问题在第二次启用时禁用）的主要内容，如果未能解决你的问题，请参考以下文章

jQuery - 更改 iframe src 时仅在第二次单击时触发

按钮onclick无法在第一次单击时工作

Jquery Click 事件在第二次点击时触发，但不是第一次

React setState 在第一次尝试时不起作用，但在第二次尝试时起作用？

<a4j:commandbutton> 操作仅在第二次单击时调用

Jquery .remove() 仅在第二次点击时起作用