Question

在我的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>

因此，当我提交表单时，即使选中的其他复选框，textbox的值也将是用户输入的值。

演示：Problem

我该如何解决这个问题？

Answer 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");
        }
    });
});

演示：Fiddle

Answer 2

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();
        ;
    }
});

根据复选框设置输入文本值

2 个答案: