Can I check the read-only box without disabling it?

Question

I am having trouble trying to resolve the issue.

In my application, I generate text inputs and checkboxes, as well as a select element. Now, in some conditions, I need to pre-populate these values ​​for the user, and I do not want the user to be able to change them. I want these items to be read-only. However, I need to be able to pass re-populated values ​​using AJAX to the server.

If I set the disable attribute on TRUE elements, then when I submit the form using the POST method, I will not be able to read the submitted values. If I had a read-only attribute available for the checkbox and select, then I would not have this problem.

My problem is that I need to pass these values, even if the elements are disabled.

Note that I am generating these fields based on the values ​​passed from the AJAX request, and for some reason I am creating another checkbox for other purposes.

Below is my code for creating 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 disconnected items to the server?

Answer 1

You can use return falsein an event onclickto prevent the occurrence of an event that will check / uncheck the box.

Demo

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

Answer 2

Try it...

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

, , click. , , , , , . , .

new_code.

1 ...

jsfiddle

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 cancel the user-selected value for any action performed by the user? For instance:

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