1

我有一个按钮 Resend ，单击它，复选框会针对以下内容启用：

  • 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，并且重新发送按钮变为完成，如果用户取消选中所有复选框，则完成按钮再次变为重新发送。AlertNotSentAlertInProgress

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

请建议

4

2 回答 2

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 演示

于 2013-07-27T07:10:35.327 回答
1

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

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(); }
});
于 2013-07-27T07:13:04.760 回答