Можно ли сделать чек-бокс доступным только для чтения, не снимая его?

У меня проблемы с решением проблемы.

В моем приложении я генерирую текстовый ввод и флажки, а также элемент выбора. Теперь в некоторых условиях мне нужно предварительно заполнить эти значения для пользователя, и я не хочу, чтобы пользователь мог их изменять. Я хочу, чтобы эти элементы были доступны только для чтения. Однако мне нужно иметь возможность передавать повторно заполненные значения с помощью AJAX на сервер.

Если я установлю для атрибута disable в элементах значение TRUE, тогда, когда я отправлю форму с помощью метода POST, я не смогу прочитать переданные значения. Если бы у меня был атрибут только для чтения, доступный для поля ввода, и я бы выбрал, то у меня не было бы этой проблемы.

Моя проблема в том, что мне нужно передать эти значения, даже если элементы отключены.

Обратите внимание, что я генерирую эти поля на основе значений, переданных обратно из запроса AJAX, и по некоторым причинам я создаю более одного флажка для разных целей.

Ниже приведен мой код для создания входов.

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

        });


    });

У меня вопрос: что я могу сделать, чтобы отправить значения отключенных элементов на сервер?


person Jaylen    schedule 19.09.2013    source источник
comment
возможный дубликат того, как отправить / отправить флажок ввода, отключен?   -  person Barmar    schedule 19.09.2013
comment
Спасибо за вашу помощь. Это сработало ‹input type = checkbox onclick = return false /›, но как я могу применить то же решение к опции выбора? поэтому я запрещаю пользователю изменять параметр по умолчанию.   -  person Jaylen    schedule 19.09.2013
comment
Я единственный, кто умеет искать в Google? stackoverflow.com/questions/5426387/   -  person Barmar    schedule 19.09.2013


Ответы (4)


Вы можете использовать return false в событии onclick, чтобы предотвратить событие, которое установит / снимет флажок.

Демо

<input type="checkbox" onclick="return false" />
person Tricky12    schedule 19.09.2013

Попробуй это...

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

Он найдет все отключенные флажки, удалит атрибут disabled, а затем остановит действие события click. Это означает, что вы можете добавить флажки, которые вы хотите разрешить событиям щелчка для работы, в более позднее время, если вам нужно, и это не повлияет на них. Только не отключайте их, когда добавляете.

Добавьте его сразу после добавления new_code.

Вот пример рабочей скрипки с 1 включенным флажком ...

пример jsfiddle

person Reinstate Monica Cellio    schedule 19.09.2013
comment
Есть небольшой недостаток. Визуально флажок выглядит так, как будто он включен, и если вы привяжете другой метод on ('Click) через jQuery, он все равно будет работать. Лично я бы использовал флажок только для чтения и скрытое поле. - person John Hartsock; 19.09.2013
comment
В вопросе нет ничего о том, как это выглядит, или будут ли какие-либо другие события щелчка, поэтому я тоже не хочу предполагать, но спасибо за комментарий :) - person Reinstate Monica Cellio; 19.09.2013

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("");
     }
   });
});
person John Hartsock    schedule 19.09.2013

Разве нельзя просто вернуть выбранное пользователем значение для любого действия, выполняемого пользователем? Например:

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