How to change visible button in div?

Question

Hello guys I have some code:

<div class="a">
    <div class="btn-group">
        <button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
        <button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
        <button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>

    </div>
</div>
<div class="b">
    <div class="btn-group">
        <button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
        <button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
        <button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>

    </div>
</div>

When i use $("button.btn.approve").addClass("disabled"); the buttons from div a and div b are disabled. How to disabled button-approve only from div a?

Possible duplicate of [jQuery disable/enable submit button](http://stackoverflow.com/questions/1594952/jquery-disable-enable-submit-button) — Smit, Mar 09 '17 at 07:43

score 3 · Answer 1 · answered Mar 09 '17 at 07:51

If you click the button, you only want to add class to the buttons in the same group?

If so do this:

$('.btn-group .btn').click(function(){
    $(this).parent().children('.btn').addClass('disabled');
});

.disabled {
  color: #bbb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="a">
    <div class="btn-group">
        <button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
        <button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
        <button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>

    </div>
</div>
<div class="b">
    <div class="btn-group">
        <button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
        <button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
        <button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>

    </div>
</div>

Pranav C Balan · Answer 2 · 2017-03-09T07:51:02.693

2

Select buttons only within the div has class a by updating the selector.

$("div.a button.btn.approve").addClass("disabled");

edited Mar 09 '17 at 07:51

answered Mar 09 '17 at 07:42

Pranav C Balan

110,383
23
155
178

andreas · Accepted Answer · 2017-03-09T07:49:17.863

2

You just have to change your selector and make it more general to include your .a class:

$(".a > .btn-group > button.btn.approve").addClass("disabled");`

edited Mar 09 '17 at 07:49

answered Mar 09 '17 at 07:42

andreas

15,414
12
68
68

But, how i Can change visible when i click button? Some like this? $( ".a > .btn-group > button.btn.approve" ).click(function() { $(" .b > .btn-group > button.btn.approve").addClass("disabled"); }); – Mateusz Sorys Mar 09 '17 at 08:12

score 1 · Answer 4 · answered Mar 09 '17 at 07:42

1

Try something like this :

 $(".a button.btn.approve").addClass("disabled");

answered Mar 09 '17 at 07:42

Quentin Roger

6,205
2
23
35

score -1 · Answer 5 · answered Mar 09 '17 at 07:44

-1

.b>.button.btn.approve

You need to define exact element because

button.btn.approve

Matches all buttons, you can add additional class or ID too

answered Mar 09 '17 at 07:44

cymruu

2,568
2
10
21

2

This won't work as `.button` isn't a direct child of `.b` – andreas Mar 09 '17 at 07:45

How to change visible button in div?

5 Answers5