javascript - rails/JQuery : Hide submit button unless at least 1 checkbox is selected

Question

我想在表单按钮中隐藏提交，除非至少选中了一个复选框。这是我的观点示例

<div class="ck-button">
    <label class="checklabel">
        <%= f.check_box :swim , class:"activityCK" %><span>swim</span>
    </label>
</div>
<div class="ck-button">
    <label class="checklabel">
        <%= f.check_box :spin , class:"activityCK" %><span>spin</span>
    </label>
</div>
<div class="ck-button">
    <label class="checklabel">
        <%= f.check_box :climb , class:"activityCK" %><span>climb</span>
    </label>
</div>

<%= f.submit 'SPOT ME!', class:"btn btn-danger bt-lg submit" %>

我从另一个用户那里找到了这个代码(我已经确认它加载正确)

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

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

但是好像没有效果。

感谢任何帮助

Answer 1

监听复选框的 change 事件而不是 click 事件，然后将 :checked 伪类与 .length 属性以确定是否有任何选中的复选框。

Example Here

$(':checkbox').on('change', function () {
    $('input[type="submit"]').prop('disabled', !$(':checkbox:checked').length);
}).change();

$(':checkbox').on('change', function () {
    $('input[type="submit"]').prop('disabled', !$(':checkbox:checked').length);
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ck-button">
    <label class="checklabel">
        <input type="checkbox"><span>swim</span>
    </label>
</div>
<div class="ck-button">
    <label class="checklabel">
        <input type="checkbox"><span>spin</span>
    </label>
</div>
<div class="ck-button">
    <label class="checklabel">
        <input type="checkbox"><span>climb</span>
    </label>
</div>

<input type="submit" value='SPOT ME!' class="btn btn-danger bt-lg submit" />