CODEWITHSUNDEEP
javascriptjquery
erics15
erics15

Reputation: 627

In jquery add class of 'enabled' to a button if a checkbox is checked otherwise leave button as 'disabled'

I have a form with a bunch of checkboxes. There's an "approve" button at the bottom. What I want to do is have the button disabled as default (easy enough), but if a checkbox is checked, ad an 'enabled class' to it (also fairly easy). But say there's 3 things checked in the options, and the user clicks one of them (so that there's now 2 selected), how do I keep the button enabled?

Sorry for the newb question, I'm just getting back into development after doing design stuff for a long while.

Check the screen shot (this is using data tables).

enter image description here I also have a function called checkbox handler which handles the grouping of selected checkboxes and sends them to a service. $('.campaign-order-approval') is the class for the checkbox. Thanks

 $approveCampaign.on("click",function(e) {
  e.preventDefault();
    var orderIDs = checkboxHandler();
    var params = 'order_ids=' + orderIDs;
    aep.utils.makeProxyCall('campaigns/' + actionSettings.id + '/approveOrders/approve',checkboxHandler, checkboxHandler, 'POST', params);

                      callInProgress();
                      //utils.aeAlert($l(14012));
                      return false;

                });
 function checkboxHandler () {
            var checkboxes = [];
            $('.campaign-order-approval').each(function () {
               var $this = $(this);
               if ($this.is(':checked')) {
                checkboxes.push($(this).attr('rel'));
                }
            });
            var checkboxIDS = checkboxes.join(',');
            return checkboxIDS;

           };

Upvotes: 0

Views: 1900

Answers (3)

Luke
Luke

Reputation: 9

Add an event handler for your checkboxes onclick event:

$('.campaign-order-approval').on('click', function () {
    $('.campaign-order-approval').each(function() {
        if ($(this).is(':checked')) {
            // If any boxes are checked, add the class and return.
            $('#SubmitButton').addClass('enabled');
            return;
        }
    });
    // Otherwise nothing is checked so remove the class.
    $('#SubmitButton').removeClass('enabled');
});

Upvotes: 1

Kevin
Kevin

Reputation: 2802

I think you're over complicating this. Why not bind to the checkboxes, and let them drive whether or not the button is disabled. When the button is clicked, get the ids.

$('div').on('click', '.campaign-order-approval', function() {
  var status = 'disabled';
  if ($(this).parent().find(':checked').length > 0) {
    status = 'enabled';
  }

  //I'm not sure how you're disabling it with just the class, 
  //but for the demo I'll continue disabling it via javascript
  $('#approveCampaign').removeClass('disabled enabled')
                       .addClass(status)
                       .attr('disabled', status === 'disabled');
});

$('#approveCampaignButtons').on('click', '#approveCampaign', function() {
  var approved = $('.campaign-order-approval:checked');
  var ids = $.map(approved, function(val, index) {
return $(val).attr('rel');
  });
  alert(ids);
});
.disabled {
  color: red;
}

.enabled {
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div>
  <input rel='cb1' type='checkbox' class='campaign-order-approval'>cb1</input>
  <input rel='cb2' type='checkbox' class='campaign-order-approval'>cb2</input>
  <input rel='cb3' type='checkbox' class='campaign-order-approval'>cb3</input>
  <input rel='cb4' type='checkbox' class='campaign-order-approval'>cb4</input>
  <input rel='cb5' type='checkbox' class='campaign-order-approval'>cb5</input>
  <input rel='cb6' type='checkbox' class='campaign-order-approval'>cb6</input>
</div>

<div id="approveCampaignButtons">
  <button id="approveCampaign" disabled='true' class='disabled'>Approve</button>
  <button id="cancelCampaign">Cancel</button>
</div>

Upvotes: 1

Rajiv
Rajiv

Reputation: 78

Hello if you want enable your button if two checkbox is checked. do it if your checkbox not add checked attribute on click then add first.

         $('.campaign-order-approval').on('click', function() {
                var tempLen = $('.campaign-order-approval').length;
                var counter = 0;
                for (var i = 0; i < tempLen; i++) {
                    if ($('.campaign-order-approval input[type="checkbox"]').eq(i).attr("checked")) {
                        counter++;
                    }
                    if (counter >= 2) {
                        //counter = 0;
                        $('#SubmitButton').addClass('enabled');
                        //return;
                    }else{
                        $('#SubmitButton').removeClass('enabled');
                    }
                }
            });

Upvotes: 1

Related Questions