CODEWITHSUNDEEP
javascriptjquery
sMilbz
sMilbz

Reputation: 951

Putting restrictions on button

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

Upvotes: 0

Views: 76

Answers (2)

m3div0
m3div0

Reputation: 1596

You can alsou use .bind() and .unbind() to add and remove click event to your button as in my example http://jsfiddle.net/Uz6Ej/

Upvotes: 1

David Hedlund
David Hedlund

Reputation: 129792

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.

Upvotes: 3

Related Questions