Setting title attribute for a disabled input

Question

I have an HTML form. Before the user can submit it, they have to agree to my privacy policy.

Before accepting the privacy policy, the button is disabled and look like this: <input type="submit" value="Invia" class="wpcf7-form-control wpcf7-submit" disabled="disabled"> .

Question is: how do I display via jquery a different title based on the disabled property? If the button is disabled, title should be "Please agree to our privacy policy to continue". If the button is not disabled, it should be "Send your request".

I tried different approaches, but none is working.

My guess would have been something like:

    /* title for disabled submit */
    if ($("input.wpcf7-submit").attr('disabled') == "disabled") {
      $("input.wpcf7-submit").attr( "title", "Please agree to our privacy policy to continue" );
    }
    else {
      $("input.wpcf7-submit").attr( "title", "Send your request" );
    }

Answer 1

You need to use prop to set the title attribute:

if ($("input.wpcf7-submit").attr('disabled') == "disabled") {
  $("input.wpcf7-submit").prop( "title", "Please agree to our privacy policy to continue" );
}
else {
  $("input.wpcf7-submit").prop( "title", "Send your request" );
}

don 't forget to wrap it in $document.ready(function () { ... }) .

Answer 2

Basically it goes like this...

$(functions() {
    if( $('.wpcf7-submit').is(':disabled') ){
        $('.wpcf7-submit').attr( "title", "Please agree to our privacy policy to continue" );
    }
});

You don't need an else because otherwise the default title will be displayed.

Answer 3

I believe this is what you need. You can run the snippet to check.

  $("#accCheck").change(function () { // this represents the checkbox that was checked // do something with it if ($(this).prop("checked")) { $("#btnAcc").prop("disabled", false); $("#btnAcc").prop("value", "Send your request"); } else { $("#btnAcc").prop("disabled", true); $("#btnAcc").prop("value", "Please agree to our privacy policy to continue"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="accCheck" class="wpcf7-form-control wpcf7-submit">I accept the conditions <br/> <input type="submit" id="btnAcc" value="Invia" class="wpcf7-form-control wpcf7-submit" disabled="disabled"> 

Answer 4

The solution is based on the hint that CBroe gave me in a comment to this question. I write it here for everybody's convenience.

/* title for disabled submit button */
$("input.wpcf7-submit").attr( "title", "Please agree to our privacy policy to continue" );
$("input.Privacy").change(function() { 
 if ($(this).prop('checked') == true) {
  $("input.wpcf7-submit").attr( "title", "Send your request" ); 
 } 
 else { 
  $("input.wpcf7-submit").attr( "title", "Please agree to our privacy policy to continue" ); 
 } 
});