Javascript 选择指定金额后禁用复选框

我一直在做一个页面，如果用户按正确的顺序从25个复选框中选择8个复选框，就可以进入我网站的某个部分

这是我迄今为止所做的工作

---

我的问题是，在选择了8个复选框之后，我如何才能完全禁用其余复选框，到目前为止，我正在使用javascript保持计数，并且我有一个警报弹出窗口，阻止他们再选择，但是如果可能的话，我想完全禁用其余的复选框。

您可以通过如下修改

设置检查方法来完成此操作：

function setChecks(obj) {
    if(obj.checked) {

        checkCount = checkCount + 1;

        //note: modify this selector to specify the actual table in question,
        //of course. If this is not known beforehand (ie there are multiple
        //tables of checkboxes), you can use
        //  $(this).closest('table').find('input:checkbox:not(:checked)')
        //instead.
        if(checkCount == 8)
            $('table input:checkbox:not(:checked)').attr('disabled', 'disabled');

    } else {

        if(checkCount == 8)
            $('table input:checkbox:not(:checked)').removeAttr('disabled');

        checkCount = checkCount - 1;
    }
}

与手头的问题无关，但希望有帮助：我知道这是一个jsFoDLE示例，因此可能不表示你的实际代码，但是你应该考虑使用一致的格式化，特别是关于缩进（和较小的间距）。此外，在编写javascript时总是使用分号也是一个好习惯，尽管有时分号是可选的。可读的代码更容易调试、扩展，也更容易让其他人理解
简化代码的另一个方法是使用样式表，而不是在每个
td
元素中指定宽度和对齐，并在每个复选框中使用不引人注目的javascript，而不是
onclick
事件。这些都可以在
文档中用简单的jQuery bind语句替换。ready
事件：

$('table input:checkbox').click(setChecks);

这需要修改
setChecks
以接收事件参数。（编辑）像这样：

您实际上不需要事件参数，因为
此
引用当前事件目标，因此您可以完全删除该参数。
您可以通过修改
设置检查方法来完成此操作，如下所示：

function setChecks(obj) {
    if(obj.checked) {

        checkCount = checkCount + 1;

        //note: modify this selector to specify the actual table in question,
        //of course. If this is not known beforehand (ie there are multiple
        //tables of checkboxes), you can use
        //  $(this).closest('table').find('input:checkbox:not(:checked)')
        //instead.
        if(checkCount == 8)
            $('table input:checkbox:not(:checked)').attr('disabled', 'disabled');

    } else {

        if(checkCount == 8)
            $('table input:checkbox:not(:checked)').removeAttr('disabled');

        checkCount = checkCount - 1;
    }
}

与手头的问题无关，但希望有帮助：我知道这是一个jsFoDLE示例，因此可能不表示你的实际代码，但是你应该考虑使用一致的格式化，特别是关于缩进（和较小的间距）。此外，在编写javascript时总是使用分号也是一个好习惯，尽管有时分号是可选的。可读的代码更容易调试、扩展，也更容易让其他人理解
简化代码的另一个方法是使用样式表，而不是在每个
td
元素中指定宽度和对齐，并在每个复选框中使用不引人注目的javascript，而不是
onclick
事件。这些都可以在
文档中用简单的jQuery bind语句替换。ready
事件：

$('table input:checkbox').click(setChecks);

这需要修改
setChecks
以接收事件参数。（编辑）像这样：

您实际上不需要事件参数，因为此
引用当前事件目标，所以您可以完全删除该参数。
如果您现在有警报，请使用以下jQuery：

$（'input[name=checkbox]：未（：选中））.attr（'disabled'，'disabled'）

查看您的代码分支，其中包含以下内容：
如果您现在有此警报，请使用jQuery：

$（'input[name=checkbox]：未（：选中））.attr（'disabled'，'disabled'）

看到你的代码中有这样一个分支：
我已经简化了你的代码，而且很简单

这将回答你的问题

    //update checkCount 
    checkCount = $(':checked').length;

    if (checkCount >= maxChecks) {
        //alert('you may only choose up to ' + maxChecks + ' options');
        $(':checkbox[name=checkbox]').not(':checked').attr('disabled', true);
    } else {
        $(':checkbox[name=checkbox]:disabled').attr('disabled', false);
    }

我已经简化了你的代码，而且它很简单

这将回答你的问题

    //update checkCount 
    checkCount = $(':checked').length;

    if (checkCount >= maxChecks) {
        //alert('you may only choose up to ' + maxChecks + ' options');
        $(':checkbox[name=checkbox]').not(':checked').attr('disabled', true);
    } else {
        $(':checkbox[name=checkbox]:disabled').attr('disabled', false);
    }

@伊恩：如果你最终选择了任何表格中的所有复选框，你可以更具体地使用选择器。@Moin：非常正确；你发布的时候我正在编辑我的答案。是的，我第一次尝试javascript大约是一天半以前。我还有很长的路要走。我要试试你给我的密码和建议。另外，我也在考虑onclick的情况，我从来都不喜欢这样做，事实上，我认为只要对代码稍加修改，我就可以通过将部分代码粘贴到doment-ready代码中，完全摆脱setchecks代码。希望我能sense@Ian，我不知道哪里需要分号，但我将明确地研究它，以及格式。至于单元格的高度和宽度，我使用dreamweaver来处理html部分，我计划在工作完成后尝试使代码总体上更整洁。@Ian我正在查看上面的setchecks代码，如何将事件参数添加到setchecks中？@Ian:如果您最终选择了任何表中的所有复选框，则可以更具体地使用选择器。@Moin:非常正确；你发布的时候我正在编辑我的答案。是的，我第一次尝试javascript大约是一天半以前。我还有很长的路要走。我要试试你给我的密码和建议。另外，我也在考虑onclick的情况，我从来都不喜欢这样做，事实上，我认为只要对代码稍加修改，我就可以通过将部分代码粘贴到doment-ready代码中，完全摆脱setchecks代码。希望我能sense@Ian，我不知道哪里需要分号，但我将明确地研究它，以及格式。至于单元格的高度和宽度，我使用dreamweaver来处理html部分，我计划在工作完成后，尝试使代码整体更整洁。@Ian我正在查看上面的setchecks代码，我如何向setchecks添加事件参数？我可以知道你的代码目标是什么吗？因为我只是觉得，你在代码上做得太过分了。我的意思是，在我看来，这本可以变得更简单。如果你认为它可以更简单，我当然愿意简化它。我打算等到我把所有的事情都做好，然后再把它简化。如果您看到可以缩短的内容，请告知。代码的目标是，如果用户知道如何按正确的组合单击复选框，则允许用户访问某个网页