Disable toggle button click function, if button in active class

Question

I just created mvc 4 application. Here the view of a table of that project.

I want to disable clickable function currently active button

For example:

disable click function of first row Active button , enable click function for Inactive button

and

disable click function of 2nd row Inactive button , enable click function for Active button

likewise rest of it.

enter image description here

Here the current cshtml code for this table view button function

<div class="btn-group btn-toggle" id="btn-toggle"> 


     @if (item.Status == true)
     {
<button class="btn btn-xs active btn-primary" data-HEI_ID = "@item.HEI_ID" data-status = "true" >Active</button>                       
<button class="btn btn-xs inactiveColor btn-default" data-HEI_ID = "@item.HEI_ID" data-status = "false" >Inactive</button>

    }

    else
   {
<button class="btn btn-xs btn-default" data-HEI_ID = "@item.HEI_ID" data-status = "true" >Active</button>                       
<button class="btn btn-xs inactiveColor btn-primary active" data-HEI_ID = "@item.HEI_ID" data-status = "false" >Inactive</button>

  }                        

  </div>

This is JavaScript code snippet to handle this buttons

   $('.btn-toggle').click(function () {

        $(this).find('.btn').toggleClass('active');
        //if ($(this).find('btn-primary').toggleClass('active')) {
        //$(this).prop('disabled', true);

        //}
        if ($(this).find('.btn-primary').size() > 0) {
            $(this).find('.btn').toggleClass('btn-primary');

        }
        if ($(this).find('.btn-danger').size() > 0) {
            $(this).find('.btn').toggleClass('btn-danger');

        }
        if ($(this).find('.btn-success').size() > 0) {
            $(this).find('.btn').toggleClass('btn-success');

        }
        if ($(this).find('.btn-info').size() > 0) {
            $(this).find('.btn').toggleClass('btn-info');

        }

        $(this).find('.btn').toggleClass('btn-default');

});

currently it stay as both active/inactive buttons clickable, I want to disable active one — Chathz
– Chathz, Commented May 15, 2015 at 9:11

Jai · Accepted Answer · 2015-05-15 09:16:27Z

1

you can use :not():

$('.btn-toggle').find('button:not(.active)').click(function () {

The above one is binding a click event on the buttons which does not have .active css class in the parent div .btn-toggle

Where i am assuming* that you have .active css class in the css which turns the button in green background color.

_{*:You can replace it with your active class.}

edited May 15, 2015 at 9:16

answered May 15, 2015 at 9:10

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chathz Over a year ago

now active button disabled , your solution 50% right but to see actual button status I should refresh page , previously it showed without page refresh when I switch button state,

user3559349 · Accepted Answer · 2015-05-15 09:51:47Z

1

Wrap your button groups in a container to make it easier to use relative selectors

<div>
    <button class="inactive">Active</button>
    <button disabled="disabled">InActive</button>
</div>

and then use the following script

$('button').click(function() {
    if (!$(this).hasClass('inactive')) {
        return;
    }
    $(this).closest('div').children('button').toggleClass('inactive');
    $(this).prop('disabled', true);
    $(this).siblings('button').prop('disabled', false);
});

Refer fiddle

answered May 15, 2015 at 9:51

user3559349

1 Comment

user3559349 Over a year ago

Do I assume that "exactly , thats What I want" is not really what you wanted after all?

A.T. · Accepted Answer · 2015-05-15 09:14:30Z

0

you need to remove click event from active buttons on DOM load event

$(document).ready(function(){
  $('.active').unbind('click');
}

answered May 15, 2015 at 9:14

A.T.

26.7k8 gold badges50 silver badges68 bronze badges

Collectives™ on Stack Overflow

Disable toggle button click function, if button in active class

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related