Can check-box be made as read only without disabling it?

Question

I am having trouble trying to solve a problem.

In my application I generate an text-input and checkbox-inputs and also a select element. Now in some condition I need to pre-populate those values for the user and I don't want the user to be able to change them. I only want these elements to be read only. However, I need to be able to pass the repopulated values using AJAX to the server.

If I set the disable attribute in the elements to TRUE then when I submit the form with a POST method I won't be able to read the passed values. If I had the read-only attribute available for the input-checkbox and select then I won't have this problem.

My problem is that I need to pass those values even though the elements are disabled.

Please note that I generate these fields based on values passed back from AJAX request and in some cause I create more that one checkbox for a different purposes.

The following is my code to create the inputs

$('#result_code_menu').change(function () {
    //reset
    $('#listNextCallDates').html('');

    $.getJSON("ajax/getDefaultScheduleDate.php", {
        result_code: $(this).val(),
        call_code: $('#selected_call_code').val()
    }, function (data) {

        if (!data) return;

        $.each(data, function (i, v) {
            var make_app = '';
            var span_class = '';

            var calendar_add = '';
            var span_class_cal = '';

            if (v.force_appointment == '1') {
                make_app = ' checked="checked" disabled="disabled" ';
                span_class = ' class="red" ';

            }

            if (v.force_on_calendar == '1') {
                calendar_add = ' checked="checked" disabled="disabled" ';
                span_class_cal = ' class="red" ';

            }

            var picker_class = '';
            if (v.disable_datetime_picker_function == '1') {
                picker_class = 'Jaylen';
            }

            var read_only_appt = '';
            if (v.disable_appointment_function == '1') {
                read_only_appt = ' disabled="disabled" ';
            }

            var read_only_cal = '';
            if (v.disable_calendar_function == '1') {
                read_only_cal = ' disabled="disabled" ';
            }

            var new_code = '<table style="width: 500px; table-layout: fixed; border: 1px dashed #C0C0C0;">' +
                '       <tr>' +
                '           <td stye="vertical-align: middle; font-weight: bold;"><b>' + v.call_code_title + '</b></td>' +
                '           <td stye="vertical-align: middle; width: 175px;">' +
                '               <input type="text" value="' + v.date + '" name="triggerOn[]" class="triggerOnPicker' + picker_class + '" readonly="readonly" style="width: 175px;">' +
                '               <input type="hidden" name="engine_ids[]" value="' + v.engine_id + '" />' +
                '               <div style="display:block; margin: 5px;"><input type="checkbox" name="isAppointment[]" value="' + v.engine_id + '"  ' + make_app + read_only_appt + ' /> <span ' + span_class + '>Make an appointment</span></div>' +
                '               <div style="display:block; margin: 5px;"><input type="checkbox" id="calendarAdd_' + v.engine_id + '" name="calendarAdd[]" value="' + v.engine_id + '"  ' + calendar_add + read_only_cal + ' /> <span ' + span_class_cal + '>Add to my Calendar</span></div>';
            new_code += v.MeetingDuration;
            new_code += v.allow_manual_owner_from_group;
            new_code += v.allow_manual_owner_from_group_parent;
            new_code += '           </td>' +
                '       </tr>' +
                '   </table>';

            $('#listNextCallDates').append(new_code);

            if (v.defval > 0) {
                $('#showOnCalendar_' + v.engine_id).show();
                $('#calendarAdd_' + v.engine_id).prop("checked", true);

            }

        });

        if (data.length > 0) $('#killScheduleDate').show('fast');
        else $('#killScheduleDate').hide('fast');
    }

    ).done(function () {

        $('.triggerOnPicker').datetimepicker({
            timeFormat: "hh:mm TT",
            changeMonth: true,
            changeYear: true,
            stepMinute: 5,
            beforeShowDay: $.datepicker.noWeekends,
            minDate: 0
        });

        $('.showOnCalendar').datetimepicker({
            timeFormat: "hh:mm TT",
            changeMonth: false,
            pickDate: false,
            changeYear: false,
            stepMinute: 5,
            beforeShowDay: $.datepicker.noWeekends,
            minDate: 0
        });


        $("[id^='calendarAdd_']").change(function () {

            var button_name = $(this).attr('id');
            var id = button_name.replace('calendarAdd_', '');

            if ($(this).is(':checked')) {
                $('#showOnCalendar_' + id).show();
            } else {
                $('#showOnCalendar_' + id).hide();
            }

        });


    });

My question is what can I do to send values from disabled elements to the server?

Answer 1

You can use return false in the onclick event to prevent the event from occurring that would check/uncheck the box.

Demo

<input type="checkbox" onclick="return false" />