Buttons with Same Class Having Trouble with JQuery Click Function

Question

ALL THESE CODE ARE INSIDE THE $(document).ready(function() { .

JSP of the "Select All" and the checkboxes under it:

<div class="select-all-columns select-all-link"><a href="#">Select All</a></div>                            
<s:iterator value="#customReports.dataAttributes" var="col" status="status">
    <div class="col-option">
        <label>
            <s:if test="%{#col.required == true}">
                <input id="report-attribute-${col.id}" disabled="disabled" checked="checked" class="column-check <s:property value="reportType"/>-column-check" type="checkbox" value="${col.name},${col.label},${col.dataType}"/>
            </s:if>
            <s:else>
                <input id="report-attribute-${col.id}" class="column-check <s:property value="reportType"/>-column-check" type="checkbox" value="${col.name},${col.label},${col.dataType}"/>
            </s:else>
            <div class="column-label">${col.label}</div>
        </label>
    </div>
</s:iterator>

I have 6 divs (each having a class ".related-settings-tab) . Each div is containing an "a" element (please read the other details below regarding this "a" element) and multiple checkboxes. What the .done() function do is to show/slide down display the Select All button and checkboxes inside this div. Below is the code on how do I call the selectAllFields() function:

$(".related-settings-tab").click(function(){
    ....
    $.ajax({
        ....
    }).done(function(){
        selectAllFields();
    });
});

I have a 6 elements "a" and it's function is to "Select All" and "Deselect All" the checkboxes under it. Below is the code for selecting all the checkboxes:

function selectAllFields(){
    $(".request-columns").click(function(){
        $(this).toggleClass("checked-all");
        var checkBox = $(this).siblings().find(".column-check");
        if($(this).hasClass("checked-all")){
            $(this).find("a").html("Deselect All");
            $(checkBox).each(function(){
                $(this).prop('checked', true);
            });
        } else {
            $(this).find("a").html("Select All");
            $(checkBox).each(function(){
                var disabled = $(this).attr("disabled");
                if(disabled != "disabled"){
                    $(this).prop('checked', false);
                }
            });
        } 
    }); 
}

If I click the first "Select All" button, the $(".request-columns").click(function(){.. is triggered. Meaning the first "Select All" button has now a class "checked-all" (created by the toggleClass code).

Then I click the second "Select All" button. Again, it has now a class "checked-all" . Both the first and second "Select All" button (which is now changed to "Deselect All" text) have a class "checked-all".

I repeat, I have 6 buttons using the same class ".request-columns" . But in this example, I'm only using the first 2 buttons .

When I tried to "Deselect All" the second, it can deselect. It enters the else code written above .

When I tried to "Deselect All" the first one, it enters the else code . BUT , after that, it enters again the if code .

Thus I can't deselect the previously toggled button. It remains having "checked-all" class because of this.

Answer 1

Remove the function from the done function of the ajax call and delegate your click event, in the else statement you need to check if element is checked not if its disabled

$('body').on('click',".request-columns",function(){
        $(this).toggleClass("checked-all");
        var checkBox = $(this).siblings().find(".column-check");
        if($(this).hasClass("checked-all")){
            $(this).find("a").html("Deselect All");
            $(checkBox).each(function(){
                $(this).prop('checked', true);
            });
        } else {
            $(this).find("a").html("Select All");
            $(checkBox).each(function(){
                if($(this).is(':checked')){
                    $(this).prop('checked', false);
                }
            });
        } 
    }); 

Answer 2

Its not quite clear how your final html looks (you should really post the generated html with your questions). That said, this should work for you and eliminates the repetitive code:

$('body').on('click', ".request-columns", function() {
  var $this = $(this);
  $this.toggleClass("checked-all");
  var checkedAll = $this.hasClass('checked-all');
  var text = checkedAll ? "Deselect All" : "Select All"; 
  $this.find("a").html(text);
  $this.parent().find(".column-check").each(function() {
    $(this).prop('checked', checkedAll); // note that this this, is a different this ;)
  });
});