[FIXED] Why is attribute changing of HTML using JS not working?

Issue

I want to disable the button or change the attribute of the field so that if there are less than 12 characters in the input field it will disable the button I tried everything i know of.(commented) (Possible Duplicate of - Can't change html attribute with external script )

Html code

<button name="button" type="submit" id="continue_button" class="step__footer__continue-btn btn" aria-busy="false">
  <span class="btn__content" data-continue-button-content="true">Continue to shipping</span>
  <svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"> <use xlink:href="#spinner-button"></use> </svg>
</button> 

JS code -

$("#checkout_shipping_address_address1").attr('maxlength','15');
      var valueLength = $('#checkout_shipping_address_address1').val();
      if(valueLength.length < 12){
     //   console.log(valueLength.length);
     //   $("#checkout_shipping_address_address1").aria-invalid="true";
       // var attrChange = $("#error-for-address1");
      //  $("#checkout_shipping_address_address1").innerHTML("aria-describedby" = attrChange);
       // $("#checkout_shipping_address_address1").innerHTML("aria-descibedby = attrChange"); 
     //   $("#checkout_shipping_address_address1").setAttribute("aria-invalid", "true");
      //  $('#continue_btn').attr("disabled", true);
      //  $('#continue_btn').disabled = true;
     //   $('#continue_btn').prop('disabled', true);
      }
      else
      {
       // $('#continue_btn').disabled=false;
      }

The attribute is not changing on the webpage neither can i disable the button.

Note- I cant change HTML/CSS code as i dont have access to it

P.S - I am quite new to JS/JQuery.

Solution

The input needs an event handler function (added with on()) so that something happens when the user changes the input value:

$("#checkout_shipping_address_address1").attr('maxlength', '15').on('input', function() {
  $('#continue_button').prop('disabled', $(this).val().length < 12);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="checkout_shipping_address_address1" />
<button name="button" disabled type="submit" id="continue_button" class="step__footer__continue-btn btn" aria-busy="false">
  <span class="btn__content" data-continue-button-content="true">Continue to shipping</span>
  <svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"> <use xlink:href="#spinner-button"></use> </svg>
</button>

Answered By - sbgib

Answer Checked By - David Marino (PHPFixing Volunteer)