Disabling dynamically generated checkbox

Question

Hi,

I have a requirement like, for booking system i need to show the available time slots. For this what i have done is like, i have a master table of timeslots where the time slot is added like and displayed as a checkbox.

'00:00-00:30

00:30-00:01

.......................

23:30-00:00'

I need to disable the booked timeslots, which can be retrived from ManageBooking Table. How can i acheive this.

Currently the checkbox value is loaded via AJAX operation

function GetAvailableSlots() {
        var rootPath = '@Url.Content("~")';       
        var ActivityList = document.getElementById("DrpDwnActivityList");
        var ActivityListValue = ActivityList.options[ActivityList.selectedIndex].value;
        var BookedDate = document.getElementById("DateBookedDate").value;
        //var DurationList = document.getElementById("DrpDwnDuration");
        //var DurationListValue = DurationList.options[DurationList.selectedIndex].value;

        if (ActivityListValue == null || ActivityListValue == "" ) {             
            return false;
        }        
        if (BookedDate == '01/01/0001' || BookedDate == "") {           
            return false;
        }
        //if (DurationListValue == null || DurationListValue == "") {            
        //    return false;
        //}
        else{
            $.ajax({
                type: "Get",
                url: rootPath + "/ManageActivityBooking/Create?handler=GetAvailableSlots",
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                data: { ActivityName: ActivityListValue, BookedDate: BookedDate },
                dataType: "json",
                success: function (result) {
                    //console.log(result) ;
                    $("#PreferredTimeSlot").html("");
                    $("#PreferredTimeSlot").append('<label class="control-label">Preferred Timeslot</label><br/>');
                    $("#PreferredTimeSlot").css("display", "block"); //clear the container.
                    $.each(result, function (key, value) {
                        $("#PreferredTimeSlot").append(`<label style="white-space:pre"><input type="checkbox" class="form-check-inline mr-2" value="${Model.HalfAnHourList}" name="ManageBooking.PreferredTimeslot"  disabled/>${value.hourlyBasedTime} <span></span></label>`);
                    });
                    // alert(result);
                },
                error: function (data) {
                    alert(data);
                }
            });
        }
    }

The backend code is

 public async Task<JsonResult> OnGetGetAvailableSlotsAsync(string ActivityName, string BookedDate)
        {
            
            DateTime BookingDate = Convert.ToDateTime(BookedDate);
            ActivityName = ActivityName.ToString();
            List<HourlyBasedView> LstPreferredTimeSlot = new List<HourlyBasedView>();            

            //LstPreferredTimeSlot = _context.HourlyBasedView.FromSqlRaw("EXEC dbo.sp_AvailableBookingSlotsTest @ActivityName = {0}, @BookedDate = {1}", ActivityName, BookingDate).
            //        AsNoTracking().ToList();

            //if (LstPreferredTimeSlot.Count == 0)
            //{
                    LstPreferredTimeSlot = _context.HourlyBasedView.FromSqlRaw("Select HourlyBasedTime from HalfAnHour order by id").AsNoTracking().ToList();
            //}
            return new JsonResult(LstPreferredTimeSlot);
        }

I want to show the already booked timelsot disabled in the checkbox list.

Answer 1

To disable previously reserved time slots, modify your AJAX success function as follows:

success: function (result) {
  //console.log(result) ;
  $("#PreferredTimeSlot").html("");
  $("#PreferredTimeSlot").append('<label class="control-label">Preferred Timeslot</label><br/>');
  $("#PreferredTimeSlot").css("display", "block"); //clear the container.
  $.each(result.AvailableSlots, function (key, value) {
    let disabled = result.BookedSlots.includes(value.hourlyBasedTime) ? "disabled" : "";
    $("#PreferredTimeSlot").append(`<label style="white-space:pre"><input type="checkbox" class="form-check-inline mr-2" value="${value.hourlyBasedTime}" name="ManageBooking.PreferredTimeslot" ${disabled} />${value.hourlyBasedTime} <span></span></label>`);
  });
  // alert(result);
},

And in your backend code, you can return both available and booked slots in a single JSON object, as shown below:

public async Task<JsonResult> OnGetGetAvailableSlotsAsync(string ActivityName, string BookedDate)
{
    DateTime BookingDate = Convert.ToDateTime(BookedDate);
    ActivityName = ActivityName.ToString();
    List<HourlyBasedView> AvailableSlots = new List<HourlyBasedView>();            
    List<string> BookedSlots = new List<string>();

    AvailableSlots = _context.HourlyBasedView.FromSqlRaw("Select HourlyBasedTime from HalfAnHour order by id").AsNoTracking().ToList();
    BookedSlots = _context.ManageBooking.Where(x => x.ActivityName == ActivityName && x.BookedDate == BookingDate).Select(x => x.PreferredTimeslot).ToList();

    return new JsonResult(new { AvailableSlots, BookedSlots });
}