0

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?

Improve this question
1
  • If the user checks the custom checkbox, the input text will be shown and they can enter their value. Assume user checks the custom and enter some value. If user doesn't want it and if unchecks the custom checkbox, the value he entered must be erased and then if user checks other checkbox its value must be set to the textfield Commented Apr 24, 2013 at 10:52

2 Answers 2

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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>

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.