javascript - Enable Disable Button if any of checkbox is checked - Stack Overflow

admin管理员组

文章数量:1290984

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


});

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 a seperated.

Here is my fiddle:

http://jsfiddle/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');
    }


});

• javascript
• jquery
• html
• checkbox

Share Improve this question Follow asked Jan 3, 2014 at 6:29 Hassan SardarHassan Sardar 4,5231717 gold badges6161 silver badges9292 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 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

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

try this

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

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

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

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

本文标签： javascriptEnable Disable Button if any of checkbox is checkedStack Overflow