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" />

Answer 2

尝试使用prop()代替attr()。

Rails / JQuery：隐藏提交按钮，除非选中至少1个复选框

2 个答案: