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

Answer 2

Try this...

    $("input:checkbox[disabled=disabled]")
        .removeAttr("disabled")
        .on("click", function(e) {
            e.preventDefault();
        });

It will find all the checkboxes that are disabled, remove the disabled attribute and then stop the click event from doing anything. Doing this means that you can add checkboxes that you want to allow click events to work, at a later time should you need to, and this won't affect them. Just don't disable them when you add them.

Add it directly after you append new_code.

Here's a working fiddle example, with 1 enabled checkbox...

jsfiddle example

Answer 3

HTML

<input type="checkbox" id="myCheckboxReadOnly" name="myCheckboxReadOnly" readonly="readonly" value="1" />
<input type="hidden" id="myCheckbox" name="myCheckbox" />

jQuery

$(document).ready(function() {
   $('#myCheckBoxReadOnly').on("change", function(evt) {
     if ($(this).checked()) {
       $('#myCheckBox').val($this.val());
     } else {
       $('#myCheckBox').val("");
     }
   });
});

Answer 4

Can't you just revert the user selected value on any action performed by the user? Eg :

$("input:checkbox").on('click',function(){
   $(this).prop('checked',!$(this).is(':checked'));
});