How to ignore disable question in HTML form so I will able to move in next section using "Next" button in HTML/JS application?

Question

I have created a form in which we are asking users a few questions. There are a few sections and in each section there are 5 to 10 questions. Users can disable the question using the NA button.

But they need to answer the remaining question. I am able to create everything but having issues with the Next button. I am not able to move to the next section because of disabled question. It is asking to answer disable question also.

Below is the code. Also, I want to remove any given answer in case the user clicks the NA button.

$(document).ready(function() {
  let ctr = 1;
  $('.answers').each(function(index) {
    let i = index + 1
    let html = ` 
    
     Never
    
    
    
    Rarely
    
    
    
    Occasionally
    
    
    
    Often
    
    
    
    Always
    

    
    
    
    Remaining Characters: 100
    
    
    
    
    `
    $(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("Please Answer this question");
  } else {
    // e.stopPropagation();
    $('ul.nav-tabs li.nav-item     a.active').closest('li').next('li').find('a').trigger('click');
  }
});


   Section 1: 


  
    
      
        1) Question 1
        
        
      
    
  
  
    
      2) Question 2
      
      
    
  
  
    
      3) Question 3
      
      
    
  
  
    
      4) Question 4
      
      
    
  
  
    
      5) QUESTION 5
      
      
    
  
  
    Remarks / Observations 
    
    Please enter your Remarks / Observations about these questions.
  



Previous
Next

user_14251221 · Answer

Just a simple change of selectors does the job.

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

Change your current invalid question selector from:

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

to:

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

This selector makes use of the CSS attribute selector to check whether each question has an input with the disabled attribute (:has(input[disabled])).

$(document).ready(function() {
  let ctr = 1;
  $('.answers').each(function(index) {
    let i = index + 1
    let html = ` 
    
     Never
    
    
    
    Rarely
    
    
    
    Occasionally
    
    
    
    Often
    
    
    
    Always
    

    
    
    
    Remaining Characters: 100
    
    
    
    
    `
    $(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("Please Answer this question");
  } else {
    // e.stopPropagation();
    console.log('valid');
    $('ul.nav-tabs li.nav-item     a.active').closest('li').next('li').find('a').trigger('click');
  }
});



   Section 1: 


  
    
      
        1) Question 1
        
        
      
    
  
  
    
      2) Question 2
      
      
    
  
  
    
      3) Question 3
      
      
    
  
  
    
      4) Question 4
      
      
    
  
  
    
      5) QUESTION 5
      
      
    
  
  
    Remarks / Observations 
    
    Please enter your Remarks / Observations about these questions.
  



Previous
Next

user_7158959 · Answer

This was a bit messy so i rewrote logic for you:

$('.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("Please Answer this question");
      // 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")
  }


});

This adds warning message only if no radios are checked and not an N/A, if all is good it removes warning messages.

It also checks if any warning messages are present, if there are no such it triggers next click.

$(document).ready(function() {
  let ctr = 1;
  $('.answers').each(function(index) {
    let i = index + 1
    let html = ` 
    
     Never
    
    
    
    Rarely
    
    
    
    Occasionally
    
    
    
    Often
    
    
    
    Always
    

    
    
    
    Remaining Characters: 100
    
    
    
    
    `
    $(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("Please Answer this question");
      // 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")
  }


});



   Section 1: 


  
    
      
        1) Question 1
        
        
      
    
  
  
    
      2) Question 2
      
      
    
  
  
    
      3) Question 3
      
      
    
  
  
    
      4) Question 4
      
      
    
  
  
    
      5) QUESTION 5
      
      
    
  
  
    Remarks / Observations 
    
    Please enter your Remarks / Observations about these questions.
  



Previous
Next

How to ignore disable question in HTML form so I will able to move in next section using "Next" button in HTML/JS application?

2 Answers

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

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