设置已禁用输入的标题属性

Question

我有一个HTML表单。 在用户提交之前，他们必须同意我的隐私政策。

在接受隐私政策之前，该按钮被禁用，如下所示： <input type="submit" value="Invia" class="wpcf7-form-control wpcf7-submit" disabled="disabled"> 。

问题是：如何根据禁用的属性通过jquery显示不同的标题？ 如果该按钮被禁用，标题应为“请同意我们的隐私政策继续”。 如果未禁用该按钮，则应为“发送您的请求”。

我尝试了不同的方法，但都没有。

我的猜测可能是这样的：

    /* 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

您需要使用prop来设置title属性：

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" );
}

别忘了将它包装在$document.ready(function () { ... }) 。

Answer 2

基本上就是这样......

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

您不需要else ，否则将显示默认标题。

Answer 3

我相信这就是你所需要的。 您可以运行代码段进行检查。

  $("#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

解决方案是基于CBroe在评论这个问题时给我的暗示。 我这里写的是为了方便大家。

/* 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" ); 
 } 
});