0

在我的 JSP 页面中，我添加了一些复选框和一个文本字段。DIV使用style:"display:"none;" 如果选中一个复选框，则该文本字段被隐藏，所有其他复选框将被禁用。该复选框的值也设置为输入字段。如果取消选中，则该值也将为空。

直到它对我有用。最后，我还有一个复选框（比如自定义）。如果选中该复选框，则所有其他复选框将被禁用，并且将显示文本字段（使用 div 隐藏的相同字段）并且用户可以输入值。问题是，如果用户选中最后一个复选框并输入一些值，如果他取消选中，则该值不会设置为 null，然后如果他也选中其他复选框，则该值不会更改为选中框的值。（该值将是一位用户输入）。

这是我的 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

1

使用.val()来设置值，而不是使用.attr('value', '')。

$('#customdelimiter').val('');

还可以更改运行时属性，例如checked并disabled使用prop()而不是attr()

$('input[type=checkbox]').attr('disabled', true);

前任：

$(document).ready(function() {
    $('input[type=checkbox]').change(function() {
        if ($(this).is(':checked')) {
            $('input[type=checkbox]').attr('disabled', true);
            $(this).attr('disabled', false);

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

更精致的样本

$(document).ready(function() {
    var chks,customdelimiter=  $('#customdelimiter'), specify = $('#specify');
    chks = $('input[type=checkbox]').change(function() {
        if ($(this).is(':checked')) {
            chks.not(this).prop('disabled', true);

            customdelimiter.val($(this).val());
        } else {
            chks.prop('disabled', false);
            customdelimiter.val('');
        }
    });
    $('#custom').change(function() {
        customdelimiter.val('');
        if ($(this).is(':checked')) {
            specify.slideDown("slow");
        } else {
            specify.slideUp("slow");
        }
    });
});

演示：小提琴

于 2013-04-24T10:50:20.057 回答
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 回答