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

【问题标题】：Set input text value based on checkbox根据复选框设置输入文本值
【发布时间】：2013-04-24 10:41:36
【问题描述】：

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

所以当我提交表单时，文本框的值将是用户输入的一个用户，即使选中了另一个复选框。

演示：Problem

我该如何解决这个问题？

【问题讨论】：

如果用户选中自定义复选框，输入文本将被显示并且他们可以输入他们的值。假设用户检查自定义并输入一些值。如果用户不想要它并且如果取消选中自定义复选框，则必须删除他输入的值，然后如果用户选中其他复选框，则其值必须设置为文本字段

标签： jquery jsp

【解决方案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

【讨论】：

【解决方案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();
        ;
    }
});

【讨论】：