如何在将鼠标悬停在提交/锚点上时检查复选框是否已选中，并显示提示用户这样做的警报

How to check if checkbox has been checked when hovering over an submit / anchor and display an alert prompting users to do so

本文关键字：显示 用户 这样做 是否 提示 复选框 悬停 提交 鼠标 检查      更新时间：2023-09-26

我对此有点不知所措，需要一些帮助。在注册用户之前，我有一个需要按下的条款和条件复选框。我已经写了一些我认为应该如何编程的伪代码。

//If user hovers over anchor
//Check to see if check box is checked
//If not checked
//Display alert saying "You need to check the terms and conditions"
//Else if - do not allow user to use anchor
//Else if user does check the box allow anchors to be used submitted

希望这是有道理的。以下是我写的一些代码，但我一无所获！请帮助：）

    $("#checkbox1").click(function() {
          $("#id-reg-submit").attr("disabled", !this.checked);
        });

上面的代码是我目前使用的，用于用户实际点击框，并阻止注册过程中的前进。

我需要做的是让它与其他链接互动（社交媒体注册）和提交按钮，因此这就是我迄今为止所拥有的：

 $(".wp-social-login-provider").hover(function(){
                            alert("Click The Terms & Conditions!");
                        });
                        if($("#checkbox1").click(function() {
                          $("#id-reg-submit").attr("disabled", !this.checked);
                        });){
                            $(".wp-social-login-provider").hover(function(){
                            alert("Click The Terms & Conditions!");
                        });
                        }else{
                            alert("hi");
                        }

我一直在玩代码悬停，试图弄清楚这一点，并将一些代码封装在if-else语句中。

    if({$("#checkbox1").click(function() {
          $("#id-reg-submit").attr("disabled", !this.checked);
        }); &&  $( "a.wp-social-login-provider" ).hover(
          function() {
            $( this ).append( $( "<span> ***</span>" ) );
          }, function() {
            $( this ).find( "span:last" ).remove();
          }
        ); )} else{
            alert.("huhuuhu");
    }

正如你所知，我需要一点帮助！有人能帮我吗？

干杯，

最大。

我认为这就是您想要实现的目标？您可以使用event.prventDefault（）；以阻止表单提交。

$('input[type=button]').on('mouseenter', function() {
if($('input[type=checkbox]').prop('checked')) { alert('true');} else {alert('false');}
});

http://jsfiddle.net/c1d7j70u/

有几种可能的方法可以做到这一点，但由于您已经提供了一个fiddle，我将从那里遵循您的逻辑：）

你提供的逻辑实际上是合理的（没有一些拼写错误），我根据你的要求对其进行了扩展。基本上，您要做的是在悬停时禁用锚链接，但仅当条款和条件未被接受/检查时才禁用。因此，您可以使用带名称空间的事件（以防绑定了其他单击事件），从而阻止使用e.preventDefault()执行默认链接操作。如果if条件的评估结果为：，则关闭此选项

$('input[type=button], .something').on('mouseenter', function () {
    if(!$('input[type="checkbox"]').prop('checked')) {
        alert('Please accept the terms and conditions');
        $('.something').on('click.disable', function(e) {
            e.preventDefault();
        });
    } else {
        $('.something').off('click.disable');
    }
});

请在此处查看小提琴：http://jsfiddle.net/teddyrised/znrrsxyr/1/

该系统唯一的缺陷是，如果用户按Tab键指向锚链接，他/她实际上可以使用该链接，因为if条件仅在mouseenter上求值。

另一种方法是，您可以监听复选框的onChange事件，而不是监听目标（按钮和锚点）上的事件，并相应地决定是否要启用目标：

// Function: disable interactions
var disableActions = function() {
    $('.something').on('click.disable', function(e) {
        e.preventDefault();
    });
    $('input[type="button"]').prop('disabled');
    $('input[type="button"], .something').on('mouseenter.disable', function() {
        alert("Please check the terms and conditions.");
    });
}
// Disable interactions at runtime
disableActions();
// Conditional onchange
$('input[type="checkbox"]').change(function() {
    if(!$(this).prop('checked')) {
        disableActions();
    } else {
        $('input[type="button"]').prop('disabled', false);
        $('.something').off('click.disable');
        $('input[type="button"], .something').off('mouseenter.disable');
    }
});

请参阅此处的替代解决方案：http://jsfiddle.net/teddyrised/znrrsxyr/4/

Here is an efficient solution as per Jquery standard.

JSFIDDLE

<input type="checkbox" id="chkBox"/>
<input type="button" id="btn" value="Hello World">
    <a href="#" id="linkTo">MY link</a>



 $("#btn, #linkTo").on("mouseenter",function(){
   // $("#chkBox").is(":checked") ? alert("checked"): alert("not checked");   
});
$("#btn, #linkTo").on("click",function(e){
    $("#chkBox").is(":checked") ? alert("call your function and replace the alert"): e.preventDefault();
});
相关文章：