使用jquery禁用按钮并取消选中复选框答案

【问题标题】：disabling the button and uncheck the checkbox using jquery使用jquery禁用按钮并取消选中复选框
【发布时间】：2013-07-26 02:05:33
【问题描述】：

我想要做的是我添加了两个默认禁用的按钮。当我添加一个项目时，一旦我单击收据按钮，这些按钮将启用，选中的复选框应该消失，这在我的笔记本电脑中工作但不在小提琴中而且如果我单击收据，它应该将 removeAttr 选中到复选框并且按钮应该禁用，因为没有选中复选框。这是我的代码JSFIDDLE

Javascript：

// json data object
var data = JSON.parse('{ "122233334444": ["Book","Three Musketters","DE7598490587","7584092043857", "03/18/13 11:17:51 AM","03/18/13 11:17:51 AM", "1" ], "122223355552":["eBook","Fall Colors","XYZ29494949","7584092043857", "03/18/13 11:17:51 AM","03/18/13 11:17:51 AM", "2" ], "122223355533":["eBook","Snowfall","XYZ29494949","7584092043857", "03/18/13 11:17:51 AM","03/18/13 11:17:51 AM", "3" ] }');
$("#submitid").click(function () {
    $('#resend').removeAttr('disabled');
    $('#receipt').removeAttr('disabled');
    var rowId = $("#number").val();
    $("#number").val("");
    var rowData = data[rowId];
    if (rowData) {

        var tr = $("<tr><td><input id='item-id' type='checkbox' checked/></td></tr>").attr("id", "datatable-row-" + rowId);
        for (var col = 0; col < rowData.length; col++)
        tr.append($("<td></td>").text(rowData[col]));
        $("#datatable").prepend(tr);
        $("#datatable").show();
    } else {
        alert("Row doesn't exist in json object: " + rowId);
    }
});
$('#receipt').click(function () {
    $('#item-id').removeAttr('checked');

    $('#resend').attr('disabled');
    $('#receipt').attr('disabled');



});

【问题讨论】：

很酷，它工作正常 -- 什么？似乎缺少上下文。
对不起，我正在尝试取消选中复选框并在单击收据按钮的同时禁用按钮...
我只是在评论第一句话听起来像是对有效答案的回应，而不是问题的开始。
您要取消选中所有复选框吗？
我需要取消选中已检查的项目并禁用这两个按钮..当我单击收据按钮时...

标签： jquery javascript-events

【解决方案1】：

首先，不要为复选框使用相同的 id，id 属性在 HTML 页面中应该是唯一的。如果要取消选中所有复选框，则可以使用：

$('#receipt').click(function(){
    $(':checked').removeAttr('checked');
    $('#resend, #receipt').attr('disabled','disabled');
});

Demo fiddle

【讨论】：

【解决方案2】：

您不能有多个具有相同 ID 的元素，ID 必须是唯一的。而不是id="item-id"，您应该使用一个类class="item-id"。

要删除复选标记，您应该使用removeProp('checked')，而不是removeAttr('checked')。属性是指静态DOM属性，仅作为输入元素的初始设置，属性是用户可以对元素进行的动态变化。

【讨论】：

【解决方案3】：

试试这个

$('#receipt').on("click",function(){
    $(':checked').removeAttr('checked');

    $('#resend').attr('disabled','disabled');
    $('#receipt').attr('disabled','disabled');



});

FIDDLE Demo

【讨论】：

【解决方案4】：

您在不同的浏览器中遇到不同的行为，因为您使用了重复的 HTML 元素 ID（它们应该是唯一的！）和 jQuery .attr() 和 .removeAttr()，您应该使用 .prop()。这将确保您的代码在不同的浏览器中更可靠地运行。

删除重复的 ID。新代码将不再引用它们。

要取消选中所有选中的复选框，您可以使用简单的选择器，例如

$('#datatable :checkbox')

或

$('#datatable :checkbox:checked')

对 JS 代码的更改 (working fiddle)

$("#submitid").click(function () {
    $('#resend').prop('disabled', false);
    $('#receipt').prop('disabled', false);

和

$('#receipt').click(function(){
    $('#datatable :checkbox:checked').prop('checked', false);
    $('#resend').prop('disabled', true);
    $('#receipt').prop('disabled', true);

【讨论】：