Putting restrictions on button

Question

In my program an area called 'validDrop' is highlighted for the user to drag and drop items into.

A new area is highlighted when the button, 'minibutton' is clicked.

I want to tell the program to only allow the button to be clicked if the current area (validDrop) is styled by 'wordglow2' and 'wordglow4'.

I have tried this, Why won't it work?

if ($(validDrop).hasClass('wordglow2', 'wordglow4')) {
    $('.minibutton').click(true);
} else {
    $('.minibutton').click(false);
}

Answer 1

Because hasClass doesn't take more than one parameter, and because .click either triggers a click or binds a click listener, it doesn't set clickability.

Depending on what .minibutton is, you could do something like:

var valid = $(validDrop).hasClass('wordglow2') && $(validDrop).hasClass('wordglow4')
$('.minibutton').prop('disabled', !valid);

If it's not a type that can be disabled, you might consider something like this:

$('.minibutton').toggleClass('disabled', !valid);

And bind the click listener like so:

$(document).on('click', '.minibutton:not(.disabled)', function() {
    // click action here
});

As ThiefMaster points out in comments, $(validDrop).is('.wordglow2.wordglow4') is a functionally equivalent way of checking that the drop has both classes.

Answer 2

您也可以使用.bind()和.unbind()在按钮上添加和删除click事件，如我的示例http://jsfiddle.net/Uz6Ej/