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

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

4 个答案: