Question

我使用带有各种复选框组的表单，我希望只有选中任何复选框时才会显示页面底部的下一个按钮。

我在这里找到了一个使用jQuery的工作解决方案：

var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");

checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});

http://jsfiddle.net/BPhZe/1937/

我正在寻找一种方法来使用MooTools，我更喜欢一种解决方案，其中按钮状态不是＆＃34;禁用＆＃34;但是通过CSS隐藏。

Answer 1

MooTools具有Element.checked属性，以查看指定的元素是否设置为＆＃34;已检查＆＃34;或不。 MooTools还允许您添加＆＃34;：已检查＆＃34;到您的选择器，只获取匹配的选定元素。这意味着您可以执行以下操作来确定是否选中了任何复选框：

if ($$("input[type=checkbox]:checked").length > 0)

或者这可以确定当前是否选中了 no 复选框：

if ($$("input[type=checkbox]:checked").length < 1)

鉴于您链接的示例表单，这是一种方法：

$$("input[type=checkbox]").each(function(checkboxInput) {
    checkboxInput.addEvent("click", function() {
        // show submit button if at least 1 checkbox is checked
        if (checkboxInput.checked) {
            $$("input[type=submit]").each(function(submitButton) {
                submitButton.removeProperty("disabled");
            });
        }
        // hide submit button if no checkboxes are checked
        if ($$("input[type=checkbox]:checked").length < 1) {
            $$("input[type=submit]").each(function(submitButton) {
                submitButton.set("disabled", "disabled");
            });
        }
    });
});

如果你的提交按钮有一个id属性 - 比如，id =＆＃34; formSubmitButton＆＃34; - 你可以用那种方式引用它并使用稍微少的代码完成同样的事情，而不必使用$$（＆＃34;输入[type = submit]＆＃34;）。each（function（submitButton）{.. 。}：

$("formSubmitButton").removeProperty("disabled");

要从禁用/重新启用按钮更改为显示/隐藏按钮，您可以使用属性样式=＆＃34; display：none;＆＃34;设置按钮来启动表单，然后调用submitButton .removeProperty（＆＃34; style＆＃34;）选中复选框时，以及submitButton.setStyle（＆＃34;显示＆＃34;，＆＃34;无＆＃34;），当不再检查时。该版本的完整代码示例，使用带有ID的提交按钮：

$$("input[type=checkbox]").each(function(checkboxInput) {
    checkboxInput.addEvent("click", function() {
        // show submit button if at least 1 checkbox is checked
        if (checkboxInput.checked) {
            $("formSubmitButton").removeProperty("style");
        }
        // hide submit button if no checkboxes are checked
        if ($$("input[type=checkbox]:checked").length < 1) {
            $("formSubmitButton").setStyle("display", "none");
        }
    });
});

检查表格中是否选中任何复选框（MooTools）

1 个答案: