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、AlertNotSentおよびAlertInProgress) に対してチェックボックスが表示され、再送信ボタンが完了になり、ユーザーがすべてのチェックボックスをオフにすると、完了ボタンが再び再送信になります。

上記を達成するための JQuery/JavaScript コードをどのように記述すればよいですか?

提案してください

4

2 に答える 2

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 に答える
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 に答える