Enable Disable Button if any of checkbox is checked

Question

I have Check All and Check Non Section.

I want to take decision , if any of the checkbox is checked, enable Delete button otherwise disable it.

Plus I want to get all the values of checked checkboxes when click on Delete button coma seperated.

Here is my fiddle:

Here is my code: HTML:

<input type="button" class="check" value="Check All" />  &nbsp; <input type="button" value="Delete" disabled /> <br/>

<input type="checkbox" class="cb-element" value="1" /> Checkbox  1 <br/>
<input type="checkbox" class="cb-element" value="2"/> Checkbox  2 <br/>
<input type="checkbox" class="cb-element" value="3"/> Checkbox  3 <br/>

JS:

$('.check:button').click(function()
{

    var checked = !$(this).data('checked');

    $('input:checkbox').prop('checked', checked);

    $(this).data('checked', checked);

    if(checked == true)
    {
        $(this).val('Uncheck All');
    }
    else 
    if(checked == false)
    {
        $(this).val('Check All');
    }


});

Arun P Johny · Accepted Answer · 2014-01-03 06:39:41Z

6

Try

$('.check:button').click(function () {
    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $('.delete:button').prop('disabled', !checked)
    $(this).data('checked', checked);
    if (checked == true) {
        $(this).val('Uncheck All');
    } else if (checked == false) {
        $(this).val('Check All');
    }
});

$('input:checkbox').change(function () {
    $('.delete:button').prop('disabled', $('input:checkbox:checked').length == 0)
})

$('.delete:button').click(function () {
    var array = $('input:checkbox:checked').map(function () {
        return this.value
    }).get();
    console.log(array, array.join())
})

Demo: Fiddle

edited Jan 3, 2014 at 6:39

answered Jan 3, 2014 at 6:34

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

6 Comments

Hassan Sardar Over a year ago

Working fine and how can I get all the checked checkboxes values comma seprated when click on delete button? Plus can you manage to do it using attr instead of prop ?

Arun P Johny Over a year ago

@CodeHunter jquery version used

Arun P Johny Over a year ago

better to use prop instead of attr

Hassan Sardar Over a year ago

I am using jquery-1.6.1.min.js

Arun P Johny Over a year ago

then instead of prop just change it to attr

|

skos · Accepted Answer · 2014-01-03 06:37:21Z

1

Give a id to delete button. Lets say if the id is delete -

$("input[type=checkbox]").on("change", function(){
  if ($("input[type=checkbox]:checked").length > 0)
  {
      $("#delete").removeAttr('disabled','disabled');
  }
  else
  {
      $("#delete").attr('disabled','disabled');
  }
});

answered Jan 3, 2014 at 6:37

skos

4,2628 gold badges39 silver badges59 bronze badges

Comments

Ravi · Accepted Answer · 2014-01-03 06:40:12Z

1

try this

var checkedSize  = $('input:checked').size()
$(':input:button[value=Delete]').attr("disabled",checkedSize === 0);

answered Jan 3, 2014 at 6:40

Ravi

8538 silver badges17 bronze badges

Comments

Hafthor · Accepted Answer · 2014-01-03 06:51:59Z

1

$(function() {
  var delbtn = $("input:button[value=Delete]");
  $("input:checkbox").change(function() { 
    if($("input:checkbox:checked").length) 
      delbtn.removeAttr("disabled"); 
    else 
      delbtn.attr("disabled","disabled");
  });
  delbtn.click(function() {
    var s=$("input:checkbox:checked").map(function(e,i) { return e.value; }).join(",");
    // s now has the values, comma separated
  });
});

edited Jan 3, 2014 at 6:51

answered Jan 3, 2014 at 6:46

Hafthor

17k9 gold badges59 silver badges66 bronze badges

Comments

Christian Kellner · Accepted Answer · 2014-01-03 06:57:09Z

1

this one should fit all your needs:

$('.cb-element').change(function(){

    var checked = !$(this).is(":checked");

    if(checked)
    {
        $("#uncheck").removeAttr("disabled");
    }
    else {
        $("#uncheck").attr("disabled","disabled");
    }
});

$('#checkall').click(function(){
     $('.cb-element').attr("checked","checked");
     $("#uncheck").removeAttr("disabled");

});

$('#uncheck').click(function(){
    var resultArr = [];
    $.each($('.cb-element'),function(){
        if($(this).is(":checked")){
            resultArr.push($(this).val());
        }
    })
    alert(resultArr.join(","))
})

answered Jan 3, 2014 at 6:57

Christian Kellner

7,41712 gold badges58 silver badges91 bronze badges

Comments

usayee · Accepted Answer · 2014-01-03 07:34:57Z

<input type="button" class="check" id="checkall" value="Check All" />  &nbsp; <input type="button" id="remove" value="Delete" /> <br/>

<input type="checkbox" class="cb-element"  value="1" /> Checkbox  1 <br/>
<input type="checkbox" class="cb-element"  value="2" /> Checkbox  2 <br/>
<input type="checkbox" class="cb-element"  value="3" /> Checkbox  3 <br/>


$('#remove').attr('disabled', 'disabled'); 

$(document).ready(function() {  

    $('.cb-element').click(function() {

        if($(this).prop('checked'))
        {
            $('#remove').attr('disabled', false);
        }
        else
        {
            $('#remove').attr('disabled', true);
        }
    });   

    $('.check:button').click(function()
{
    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $(this).data('checked', checked);

    if(checked == true)
    {
        $(this).val('Uncheck All');
         $('#remove').attr('disabled', false);
    }

    else if(checked == false)
    {
        $(this).val('Check All');
        $('#remove').attr('disabled', true);
    }
});
});

Collectives™ on Stack Overflow

Enable Disable Button if any of checkbox is checked

6 Answers 6

6 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related