Gray out/disable specific checkbox

Get Help
, ,
1

I have a checkbox field with a list of dates for classes that people would like to RSVP for. They check the box for each date that they are interested in. As each date passes, I’d like to keep them in the checkbox list, but disable the user from selecting them. Is there a way to gray out or disable individual checkboxes and keep others active?

2

You can disable past date checkboxes in Gravity Forms using jQuery to:

$(document).ready(function() {
    var checkboxes = $("input[type='checkbox']");
    var currentDate = new Date();

    checkboxes.each(function() {
        var checkboxDate = new Date($(this).parent().text().trim());
        if (currentDate > checkboxDate) {
            $(this).prop('disabled', true);
        }
    });
});

This code may need some changes to suit your form specifics. Give it a try, and let me know how that goes! :smile:

3

thanks for the suggestion! The problem is, the checkboxes aren’t strictly dates… they’re text with the date, workshop title and presenter name. Im assuming there’s a way to adjust your function to say "if (checkbox label = “9/10/23 - Workshop A with Dr. Bob Smith”)… disable it?, and then do a switch or if/else to check for multiple strings as multiple dates pass?

What’s the best way to do that?

thanks!!!

4

If the date always starts at the beginning, you can use the following code to split the date from the label text and check whether it has passed or not.

$(document).ready(function() {
    var checkboxes = $("input[type='checkbox']");
    var currentDate = new Date();

    checkboxes.each(function() {
        var label = $(this).parent().text().trim();
        var dateString = label.split(' - ')[0];
        var checkboxDate = new Date(dateString); 

        if (currentDate > checkboxDate) {
            $(this).prop('disabled', true);
        }
    });
});
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.