javascript - Disable anchor with onclick - Stack Overflow

admin管理员组

文章数量:1426975

I have a problem to disable my anchor when its being pressed.

HTML:

<a href='#' data-bind='click: clickActivateSpatialSearch' id='draw_polygon'>
<i class='polygon_mark'></i>
</a>
<a href='#' data-bind='click: clickActivateSpatialSearchBox' id='draw_box'>
<i class='square_mark'></i>
</a>

jQuery

    $('.square_mark').click(function () {
        if(!$(this).hasClass('active')) {
            $(this).addClass('active');
            $('.polygon_mark').off('click', disabler);
        } else {
            $(this).removeClass('active');
            $('.polygon_mark').on('click', disabler);
        }
    });
    $('.polygon_mark').click(function () {
        if(!$(this).hasClass('active')) {
            $(this).addClass('active');
            $('.square_mark').off('click', disabler);
        } else {
            $(this).removeClass('active');
            $('.square_mark').on('click', disabler);
        }
    });
});

Function:

disabler: function(event) {
    event.preventDefault();
    return false;
},

The functionality to change classes are working fine, but what I wanted to add into this, os when anchor #1 is being pressed, this disables the other anchor, and when I press it once again, I'd like it to reenable the anchor, and also the other way around but for anchor #2.

I tried doing something like this, but I cannot get it to work, not fully understanding it either.

I have a problem to disable my anchor when its being pressed.

HTML:

<a href='#' data-bind='click: clickActivateSpatialSearch' id='draw_polygon'>
<i class='polygon_mark'></i>
</a>
<a href='#' data-bind='click: clickActivateSpatialSearchBox' id='draw_box'>
<i class='square_mark'></i>
</a>

jQuery

    $('.square_mark').click(function () {
        if(!$(this).hasClass('active')) {
            $(this).addClass('active');
            $('.polygon_mark').off('click', disabler);
        } else {
            $(this).removeClass('active');
            $('.polygon_mark').on('click', disabler);
        }
    });
    $('.polygon_mark').click(function () {
        if(!$(this).hasClass('active')) {
            $(this).addClass('active');
            $('.square_mark').off('click', disabler);
        } else {
            $(this).removeClass('active');
            $('.square_mark').on('click', disabler);
        }
    });
});

Function:

disabler: function(event) {
    event.preventDefault();
    return false;
},

The functionality to change classes are working fine, but what I wanted to add into this, os when anchor #1 is being pressed, this disables the other anchor, and when I press it once again, I'd like it to reenable the anchor, and also the other way around but for anchor #2.

I tried doing something like this, but I cannot get it to work, not fully understanding it either.

• javascript
• jquery
• html

Share Improve this question Follow asked Mar 12, 2013 at 12:08 WeeklyDadWeeklyDad 31711 gold badge44 silver badges1515 bronze badges 1

• What exactly does not work? What buttons do you press and what happens not as expected? – Bergi Commented Mar 12, 2013 at 12:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Do this and add a disable class to your css.

$('.square_mark').click(function () {
        $(this).toggleClass('active');
        $('.polygon_mark').toggleClass("disabled");
});

$('.polygon_mark').click(function () {
        $(this).toggleClass('active');
        $('.square_mark').toggleClass("disabled");
});

this should do the tric.

.disabled {
   pointer-events: none;
   cursor: default;
}

Edit: example on jsfiddle: http://jsfiddle/uKCYN/

And if you need to check for the active class to do something else you can code it like this:

$('.square_mark').click(function () {
    if(!$(this).hasClass('active'))
        $(this).addClass('active');
    else
        $(this).removeClass('active');
    $('.polygon_mark').toggleClass("disabled");
});

$('.polygon_mark').click(function () {
    if(!$(this).hasClass('active'))
        $(this).addClass('active');
    else
        $(this).removeClass('active');
    $('.square_mark').toggleClass("disabled");
});

and add your additional stuff into the if clauses.

Just modify the handler function like this and try again:

// handler function
function disabler(event) {
    event.preventDefault();
    console.log('item anchor clicked');
}

本文标签： javascriptDisable anchor with onclickStack Overflow