Set input text value based on checkbox

Question

In my JSP page I am adding some checkboxes and one text field. That textfield is hidden by using DIV using the style:"display:"none;" If one checkbox is checked, all other checkboxes will be disabled. And also the value of that checkbox is setting to the input field. If it unchecks, the value will also be null.

Till that it works for me. In the last, I have one more checkbox(say custom). If that one is checked, all other checkboxes will be disabled and the textfield(the same one hidden using div) will be shown and user can enter value. The problem is, if user checks last checkbox and enter some value and if he unchecks, the value will not be set to null and then if hechecks other checkbox also, the value won't change to checked box's value.(the value will be the one user entered).

Here is my JSP code

<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>

Here is my 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>

So when I submit the form, the value of textbox will be the one user entered even if the selected other checkbox.

Demo: Problem

How can I solve this?

Answer 1

Use .val() to set the value instead of using .attr('value', '').

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

Also to change runtime properties like checked and disabled use prop() instead of attr()

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

Ex:

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

A more refined sample

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

Demo: 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>

Script:

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