可以将复选框设置为只读而不禁用它吗？

Question

我在尝试解决问题时遇到了麻烦。

在我的应用程序中，我生成了一个文本输入和复选框输入以及一个选择元素。现在在某些情况下，我需要为用户预先填充这些值，并且我不希望用户能够更改它们。我只希望这些元素是只读的。但是，我需要能够使用 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();
            }

        });


    });

我的问题是如何将值从禁用的元素发送到服务器？

Answer 1

您可以在onclick 事件中使用return false 来防止发生会选中/取消选中该框的事件。

Demo

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

Answer 2

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 3

试试这个...

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

它会找到所有被禁用的复选框，删除 disabled 属性，然后停止单击事件执行任何操作。这样做意味着您可以添加要允许单击事件工作的复选框，以后如果需要，这不会影响它们。只是不要在添加它们时禁用它们。

追加new_code后直接添加。

这是一个有效的小提琴示例，启用了 1 个复选框...

jsfiddle example

Answer 4

您不能在用户执行的任何操作上恢复用户选择的值吗？ 例如：

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