Javascript 如果选中任何复选框，则启用禁用按钮

我已经检查了全部和非部分

我想做出决定，如果选中任何复选框，请启用删除按钮，否则禁用它

另外，我希望在单击“删除”按钮时获得选中复选框的所有值

这是我的小提琴：

这是我的密码： 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/>

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


});

试一试

演示：

试试看

---

演示：

给出一个

id

删除按钮。假设

id

是delete-

---

给一个

id

删除按钮。假设

id

是delete-

试试这个

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

试试这个

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

---

这一款应该适合您的所有需求：

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

---

这一款应该适合您的所有需求：

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

复选框1

复选框2

复选框3

$（'#remove'）.attr（'disabled'，'disabled'）；
$（文档）.ready（函数（）{
$（'.cb元素'）。单击（函数（）{
if（$（this.prop（'checked'））
{
$（'#remove'）.attr（'disabled'，false）；
}
其他的
{
$（'#remove'）.attr（'disabled'，true）；
}
});   
$（'.check:button'）。单击（函数（）
{
var checked=！$（this.data（'checked'）；
$（'input:checkbox'）.prop（'checked'，checked）；
$（此）.data（'checked'，checked）；
如果（选中==true）
{
$（this.val（'Uncheck All'）；
$（'#remove'）.attr（'disabled'，false）；
}
else if（选中==false）
{
$（this.val（'Check All'）；
$（'#remove'）.attr（'disabled'，true）；
}
});
});

复选框1

复选框2

复选框3

$（'#remove'）.attr（'disabled'，'disabled'）；
$（文档）.ready（函数（）{
$（'.cb元素'）。单击（函数（）{
if（$（this.prop（'checked'））
{
$（'#remove'）.attr（'disabled'，false）；
}
其他的
{
$（'#remove'）.attr（'disabled'，true）；
}
});   
$（'.check:button'）。单击（函数（）
{
var checked=！$（this.data（'checked'）；
$（'input:checkbox'）.prop（'checked'，checked）；
$（此）.data（'checked'，checked）；
如果（选中==true）
{
$（this.val（'Uncheck All'）；
$（'#remove'）.attr（'disabled'，false）；
}
else if（选中==false）
{
$（this.val（'Check All'）；
$（'#remove'）.attr（'disabled'，true）；
}
});
});

工作正常，当单击“删除”按钮时，如何将所有复选框值以逗号分隔？另外，你能用attr代替prop吗？@CodeHunter jquery version usedbetter用

prop

代替

attr

我用的是jquery-1.6.1.min.js，然后不用prop，改成attrWorking fine，点击delete按钮时我怎么能把所有复选框值逗号分隔开？另外，你能用attr代替prop吗？@CodeHunter jquery version usedbetter用

prop

代替

attr

我用的是jquery-1.6.1.min.js，然后把它改成attr

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