Question

我有一个重新发送按钮，点击它后，复选框将针对以下内容启用：

id="AlertSent"
id="AlertNotSent"
id="AlertInProgress"

现在上面提到的DIVS的DIV代码如下

<div class="span9">
    <div class="row-fluid">
    <div id="enableCheckBox" class ="span12">
            <input type="checkbox" id="checkbox1" name="checkbox1"/>
        </div>
        <div id="AlertSent" class="span12">
            <label><spring:message code='alert.sent' />:</label>
        </div>
    </div>
    <div class="row-fluid">
    <div id="enableCheckBox" class ="span12">
            <input type="checkbox" id="checkbox2" name="checkbox2"/>
        </div>
        <div id="AlertNotSent" class="span12">
            <label><spring:message code='alert.not.sent'/>:</label>
        </div>
    </div>
    <div class="row-fluid">
    <div id="enableCheckBox" class ="span12">
            <input type="checkbox" id="checkbox3" name="checkbox3" class="required" />
        </div>
        <div id="AlertInProgress" class="span12">
            <label> <spring:message code='alert.in.progress' />:</label>
        </div>
    </div>
</div>

重新发送和完成代码按钮

<input type="button" value="button" id="resend"/>
<input type="button" value="button" id="done"/>

JQuery代码

var j$ = jQuery.noConflict();
j$(document).ready(function() {   
    var resendbtn = j$('#resend');
    var allChkBox = j$('input[name="enableCheckBox"]');

    var verifyChecked = function() {
        if ! $('#resend').click {
            allChkBox.attr('disabled', 'disabled');
        } else {
            allChkBox.removeAttr('disabled');
        }
    };

    verifyChecked();

    resendbtn.change(verifyChecked);
});

要求是点击重新发送，复选框显示在DIVS上方（AlertSent，AlertNotSent和AlertInProgress），重新发送按钮成为完成，如果用户取消选中全部复选框然后再次完成重新发送。

如何编写JQuery / JavaScript代码以实现上述目标？

请建议

Answer 1

请尝试以下代码：

HTML：

<input type="checkbox" class="chk">
<input type="button" value="Resend" class="toggle">

JS：

$(document).ready(function(){
    $(".chk").prop("checked","checked");
    $(".chk").css('display','none');
    $(".toggle").click(function(){
        $(".chk").css('display','block');
        $(".chk").prop("checked","checked");
        $(this).val("Done");
    });
    $(".chk").change(function(){
        var all = $(".chk").length;
        var chked = $(".chk").not(":checked").length;
        if(all == chked){
            $(".chk").css('display','none');
            $(".toggle").val("Resend");
        }
    })
});

JSFIDDLE DEMO

Answer 2

很难确切地知道你想要什么，但也许这会让你开始：

http://jsfiddle.net/ZqH7B/

处理显示复选框：

$("#resend").on( 'click', function () {
    $('.enableCheckBox').css('visibility', 'inherit');
    $(this).hide().next().show();
    $('input:checkbox').prop('checked', true);
});

处理取消选中行为：

$('input[type=checkbox]').on( 'change', function() {
    var num = $('input:checked').length;
    if ( num == 0 ) { $('#resend').show().next().hide(); }
});

单击按钮显示复选框

2 个答案: