CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Hassan Sardar
Hassan Sardar

Reputation: 4523

Enable Disable Button if any of checkbox is checked

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:

http://jsfiddle.net/48ZRu/2/

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');
    }


});

Upvotes: 1

Views: 4284

Answers (6)

usayee
usayee

Reputation: 59

<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);
    }
});
});

Upvotes: 1

Christian
Christian

Reputation: 7429

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(","))
})

Upvotes: 1

Hafthor
Hafthor

Reputation: 16896

$(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
  });
});

Upvotes: 1

Ravi
Ravi

Reputation: 853

try this

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

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 6

skos
skos

Reputation: 4212

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');
  }
});

Upvotes: 1

Related Questions