4

問題を解決するのに苦労しています。

私のアプリケーションでは、テキスト入力とチェックボックス入力、および選択要素も生成します。ある状況では、ユーザーのこれらの値を事前に入力する必要があり、ユーザーがそれらを変更できないようにしたくありません。これらの要素を読み取り専用にしたいだけです。ただし、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();
            }

        });


    });

私の質問は、無効な要素からサーバーに値を送信するにはどうすればよいですか?

4

4 に答える 4

9

イベントで使用return falseしてonclick、ボックスをオンまたはオフにするイベントが発生しないようにすることができます。

デモ

<input type="checkbox" onclick="return false" />
于 2013-09-19T16:52:53.717 に答える
3

これを試して...

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

無効になっているすべてのチェックボックスを見つけ、無効な属性を削除してから、クリックイベントが何もしないようにします。これを行うと、後で必要に応じて、クリック イベントを機能させたいチェックボックスを追加することができ、これはそれらに影響しません。それらを追加するときにそれらを無効にしないでください。

を追加した直後に追加しますnew_code。

これは、1つのチェックボックスが有効になっている実際のフィドルの例です...

jsfiddle の例

于 2013-09-19T16:51:46.080 に答える
0

ユーザーが実行したアクションで、ユーザーが選択した値を元に戻すことはできませんか? 例:

$("input:checkbox").on('click',function(){
   $(this).prop('checked',!$(this).is(':checked'));
});
于 2013-09-19T16:53:19.713 に答える