如果選中任何復選框，則啟用禁用按鈕

Question

我有全部檢查和非檢查部分。

我要做出決定，如果已選中任何復選框，請啟用“刪除”按鈕，否則將其禁用。

另外，單擊分隔的“刪除”按鈕逗號時，我想獲得所有選中復選框的值。

這是我的小提琴：

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

這是我的代碼： 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');
    }


});

Answer 1

嘗試

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

演示： 小提琴

Answer 2

輸入id刪除按鈕。 假設id是否為delete-

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

Answer 3

嘗試這個

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

Answer 4

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

Answer 5

這應該適合您的所有需求：

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

Answer 6

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