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

Question

I am a little lost in working on this and need some help please. I have a checkbox for terms and conditions that needs to be pressed before users can be registered. I have written some pseudo code in how I think it should be programmed.

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

Hope that make sense. Here is some of the code I have written but I am getting nowhere! Please help :)

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

This above code is what I am using at the moment for users to actually click the box and prevents the moving forward in the sign up process.

What I need to do is get this to interacted with the other links (social media signup) and the submit button, thus this is what I have so far:

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

I have been playing with code hover on and off stated trying to figure this out and have wrapped some code in an if else statement.

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

As you can tell I need a little help! Can anyone help me please?

Cheers,

Max.

Answer 1

I think this is what you want to achieve? you can use event.preventDefault(); to stop the form from submitting.

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

http://jsfiddle.net/c1d7j70u/

Answer 2

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

Answer 3

There are a few possible ways of getting this done, but since you have already provided a fiddle, I will follow your logic from there :)

Your logic in the fiddle you have provided is actually sound (sans a few typos), and I have expanded on it based on your requirements. Basically what you want to do is to disable the anchor link when it is hovered on, but only when the terms and conditions are not accepted/checked. Therefore, you can use a namespaced event (in case if you have other click events bound to it), which prevents the default link action from executing using e.preventDefault() . You turn this off if the if condition evaluates otherwise:

$('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');
    }
});

See fiddle here: http://jsfiddle.net/teddyrised/znrrsxyr/1/

The only flaw of this system is that if a user tabs his way to the anchor link, he/she can actually use the link because the if conditionals are only evaluated on mouseenter.

---

An alternative approach is instead of listening to events on the targets (button and anchor), you can listen to the onChange events of your checkbox, and decide if you want to enable the targets accordingly:

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

See alternative solution here: http://jsfiddle.net/teddyrised/znrrsxyr/4/