How to active the 'nav-link disabled' using jquery?

Question

 - List item

    <ul class="nav nav-tabs-outline">
                <li class="nav-item">
                  <a class="nav-link active" data-toggle="tab" href="#shot-Title">Title</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" data-toggle="tab" href="#shot-Description" id="disco">Description</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" data-toggle="tab" href="#shot-Details">Details</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" data-toggle="tab" href="#shot-Skills">Exprtise and Skills</a>
                </li>
                  <li class="nav-item">
                  <a class="nav-link disabled" data-toggle="tab" href="#shot-Budget">Budget</a>
                </li>
              </ul>

JavaScript

 <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <script type='text/javascript'>
            $(document).ready(function(){
                $('#jobpostname').keyup(function () {
                    if ($(this).val() == '') {
                        //Check to see if there is any text entered
                        // If there is no text within the input then disable the button
                        $('#disco').prop('disabled', true);

                    } else {
                        //If there is text in the input, then enable the button
                        $('#disco').prop('disabled', false);
                    }
                });
            }); 
        </script>

There is a input element in title tag, what i want to do is when i type something in title input the description link should get activated, is there a way to active the 'nav-link disabled' using jquery?

Answer 1

Hi Aksingh welcome to Stackoverflow's community.

In your code disabled and active are classes not attributes or properties.

So you can use jQuery's addClass and removeClass methods to solve your problem

try this code ..

$(document).ready(function(){
        $('#jobpostname').keyup(function () {
            if ($(this).val() == '') {
                //Check to see if there is any text entered
                // If there is no text within the input then disable the button
                $('#disco').addClass('disabled');
                $('#disco').removeClass('active'); 

            } else {
                //If there is text in the input, then enable the button
                $('#disco').addClass('active');
                $('#disco').removeClass('disabled');
            }
        });
    });