0

私の JSP ページでは、いくつかのチェックボックスと 1 つのテキスト フィールドを追加しています。DIV1 つのチェックボックスをオンstyle:"display:"none;" にすると、他のすべてのチェックボックスが無効になります。また、そのチェックボックスの値が入力フィールドに設定されています。チェックを外すと、値も null になります。

それが私のために働くまで。最後に、もう1つのチェックボックスがあります（カスタムと言います）。それがチェックされている場合、他のすべてのチェックボックスが無効になり、テキストフィールド (div を使用して非表示になっているものと同じもの) が表示され、ユーザーは値を入力できます。問題は、ユーザーが最後のチェックボックスをチェックして何らかの値を入力し、チェックを外すと値がnullに設定されず、他のチェックボックスもチェックすると値がチェックボックスの値に変更されないことです(値は1 人のユーザーが入力した)。

ここに私のJSPコードがあります

<div class="control-group">
                <label class="control-label">Please choose delimiter:</label>
                <div class="controls">
                    <ul class="nav nav-list">
                        <li><input class="staticdel" type="checkbox" id="," value="," />&nbsp;Comma(,)</li>
                        <li><input class="staticdel" type="checkbox" id="|" value="|" />&nbsp;Pipe
                            Delimiter(|)</li>
                        <li><input type="checkbox" id="custom" />&nbsp;Custom(Specify)</li>
                    </ul>
                </div>
            </div>

            <div id="specify" class="control-group" style="display: none;">
                <label class="control-label" for="delimiter">Please provide
                    the delimiter:</label>
                <div class="controls">
                    <input id="customdelimiter" type="text" name="delimiter"
                        placeholder="Specify Delimiter" />
                </div>
            </div>

ここに私のJQueryがあります

<script>
        $(document).ready(function() {
            $('input[type=checkbox]').change(function() {
                if ($(this).is(':checked')) {
                    $('input[type=checkbox]').attr('disabled', true);
                    $(this).attr('disabled', false);
                    var delValue = $(this).val();
                    $('#customdelimiter').attr('value', delValue);

                } else {
                    $('input[type=checkbox]').attr('disabled', false);
                    $('#customdelimiter').attr('value', '');
                }
            });
            $('#custom').change(function() {
                if ($(this).is(':checked')) {
                    $('#customdelimiter').attr('value', '');
                    $('#specify').slideDown("slow");
                } else {
                    $('#specify').slideUp("slow");
                    $('#customdelimiter').attr('value', '');
                }
            });
        });
    </script>

したがって、フォームを送信すると、他のチェックボックスが選択されていても、テキストボックスの値はユーザーが入力したものになります。

デモ:問題

どうすればこれを解決できますか?

4

2 に答える 2

0

HTML:

<div class="control-group">
    <label class="control-label">Please choose delimiter:</label>
    <div class="controls">
        <ul class="nav nav-list">
            <li><input class="staticdel" type="checkbox"  value="," />&nbsp;Comma(,)</li>
            <li><input class="staticdel" type="checkbox"  value="|" />&nbsp;Pipe
                Delimiter(|)</li>
            <li><input type="checkbox" id="custom" />&nbsp;Custom(Specify)</li>
        </ul>
    </div>
</div>

<div id="specify" class="control-group" style="display: none;">
    <label class="control-label" for="delimiter">Please provide
        the delimiter:</label>
    <div class="controls">
        <input id="customdelimiter" type="text" name="delimiter"
               placeholder="Specify Delimiter" />
    </div>
</div>

脚本：

$('input[type=checkbox]').change(function() {
    if ($(this).is(':checked')) {
        $('input[type=checkbox]').attr('disabled', true);
        $(this).attr('disabled', false);
        if ($(this).attr('id') != 'custom') {
            var delValue = $(this).val();
            $('#customdelimiter').val(delValue);
        }
        $('#specify').show();
    } else {
        $('input[type=checkbox]').attr('disabled', false);
        $('#customdelimiter').val('').closest('#specify').hide();
        ;
    }
});
于 2013-04-24T10:53:58.953 に答える