Not able to make two way button (On first click make question disable in 2nd make enable )-CodePudding

I have written a code for NA button in which it disable the question after click.But if user click it by mistake i am not able to make it enable after 2nd click.

Below is the code for button.

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

Above is the Jquery i have written for this.

JS :-

    $(document).ready(function() {
  let ctr = 1;
  $('.answers').each(function(index) {
    let i = index   1
    let html = ` <div >
    <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="1">
    <label  for="gridRadios${ctr}"> Never</label>
    </div>
    <div >
    <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="2">
    <label  for="gridRadios${ctr}">Rarely</label>
    </div>
    <div >
    <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="3">
    <label  for="gridRadios${ctr}">Occasionally</label>
    </div>
    <div >
    <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="4">
    <label  for="gridRadios${ctr}">Often</label>
    </div>
    <div >
    <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="5">
    <label  for="gridRadios${ctr}">Always</label>
    </div>

    <div >
    <input type="button" name="q${i}Remark" value="Remark" onclick="onButtonClick(${i})" />
    <input  type="text" id="textInput${i}" value="" oninput="updateTextBox()" />
    <p>Remaining Characters: <span id="chars-left">100</span></p>
    </div>
    <div >
    <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 >
  <div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br>
  <fieldset >
    <div >
      <div >
        <legend id="q1" ><b>1) Question 1</b></legend>
        <div >
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset >
    <div >
      <legend id="q2" ><b>2) Question 2</b></legend>
      <div >
      </div>
    </div>
  </fieldset>
  <fieldset >
    <div >
      <legend id="q3" ><b>3) Question 3</b></legend>
      <div >
      </div>
    </div>
  </fieldset>
  <fieldset >
    <div >
      <legend id="q4" ><b>4) Question 4</b></legend>
      <div >
      </div>
    </div>
  </fieldset>
  <fieldset >
    <div >
      <legend id="q5" ><b>5) QUESTION 5</b></legend>
      <div >
      </div>
    </div>
  </fieldset>
  <div >
    <label for="remarks"><b>Remarks / Observations </b></label>
    <input type="name"  name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations">
    <small id="nameHelp" >Please enter your Remarks / Observations about these questions.</small>
  </div>
</div>
<br>
<a >Previous</a>
<a >Next</a>
</div>

CodePudding user response：

I've would change 2 things reguarding this problem.

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

^this counts all .answers that is disabled, but not the one you click on. That will ensure that we can enable the input if it's disabled.

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

^This will switch between disabled and enabled based on if it's disabled or ntoe.

Result

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

Demo

$(document).ready(function() {
  let ctr = 1;
  $('.answers').each(function(index) {
    let i = index   1
    let html = `<div > <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="1"> <label  for="gridRadios${ctr}"> Never</label> </div> <div > <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="2"> <label  for="gridRadios${ctr}">Rarely</label> </div> <div > <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="3"> <label  for="gridRadios${ctr}">Occasionally</label> </div> <div > <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="4"> <label  for="gridRadios${ctr}">Often</label> </div> <div > <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="5"> <label  for="gridRadios${ctr}">Always</label> </div> <div > <input type="button" name="q${i}Remark" value="Remark" onclick="onButtonClick(${i})" /> <input  type="text" id="textInput${i}" value="" oninput="updateTextBox()" /> <p>Remaining Characters: <span id="chars-left">100</span></p> </div> <div > <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 >
  <div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br>
  <fieldset >
    <div >
      <div >
        <legend id="q1" ><b>1) Question 1</b></legend>
        <div >
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset >
    <div >
      <legend id="q2" ><b>2) Question 2</b></legend>
      <div >
      </div>
    </div>
  </fieldset>
  <fieldset >
    <div >
      <legend id="q3" ><b>3) Question 3</b></legend>
      <div >
      </div>
    </div>
  </fieldset>
  <fieldset >
    <div >
      <legend id="q4" ><b>4) Question 4</b></legend>
      <div >
      </div>
    </div>
  </fieldset>
  <fieldset >
    <div >
      <legend id="q5" ><b>5) QUESTION 5</b></legend>
      <div >
      </div>
    </div>
  </fieldset>
  <div >
    <label for="remarks"><b>Remarks / Observations </b></label>
    <input type="name"  name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations">
    <small id="nameHelp" >Please enter your Remarks / Observations about these questions.</small>
  </div>
</div>
<br>
<a >Previous</a>
<a >Next</a>
</div>