Is there a way to shorten this jQuery?

Question

I have this piece of jQuery, and I know it's repetitive. I need some help cleaning this up, I'm still new to jQuery/JavaScript!

    $(function () {
    $('form').each(function () {
        var form = $(this);
        form.find('.custSwitch_1').change(function () {
            if (form.find('.custSwitch_1:checked').length) {
                form.find('.custAction_1').prop('disabled', false).trigger("chosen:updated").trigger("change");
            } else {
                form.find('.custAction_1').prop({'disabled': true, 'selectedIndex': 0, 'value':''}).trigger("chosen:updated").trigger("change");
            }
        });
        form.find('.custSwitch_2').change(function () {
            if (form.find('.custSwitch_2:checked').length) {
                form.find('.custAction_2').prop('disabled', false).trigger("chosen:updated").trigger("change");
            } else {
                form.find('.custAction_2').prop({'disabled': true, 'selectedIndex': 0, 'value':''}).trigger("chosen:updated").trigger("change");
            }
        });
        form.find('.custSwitch_3').change(function () {
            if (form.find('.custSwitch_3:checked').length) {
                form.find('.custAction_3').prop('disabled', false).trigger("chosen:updated").trigger("change");
            } else {
                form.find('.custAction_3').prop({'disabled': true, 'selectedIndex': 0, 'value':''}).trigger("chosen:updated").trigger("change");
            }
        });
        form.find('.custSwitch_4').change(function () {
            if (form.find('.custSwitch_4:checked').length) {
                form.find('.custAction_4').prop('disabled', false).trigger("chosen:updated").trigger("change");
            } else {
                form.find('.custAction_4').prop({'disabled': true, 'selectedIndex': 0, 'value':''}).trigger("chosen:updated").trigger("change");
            }
        });
        form.find('.roof').change(function () {
            if (form.find('.roof:checked').length) {
                form.find('.sunroof').prop('disabled', false).trigger("chosen:updated").trigger("change");
                form.find('.antenna').button("enable");
            } else {
                form.find('.sunroof').prop({'disabled': true, 'selectedIndex': 0}).trigger("chosen:updated").trigger("change");
                form.find('.antenna').prop("checked", false).button("refresh").button("disable", "disable");
            }
        });
    });
});

I don't know whether to use loop, or something like

className.replace("custAction_", "custSwitch")

and how to implement it..... Been searching for a couple of days now, and just can't seem to either get my head around it!

Any help would be appreciated.

Answer 1

Thanks for your help, actually got some coffee :-) and worked out this solution...

            var switches = [1, 2, 3, 4];
        $.each(switches, function(index, value) {
            form.find('.custSwitch_' + value).change(function () {
                if (form.find('.custSwitch_' + value + ':checked').length) {
                    form.find('.custAction_' + value).prop('disabled', false).trigger("chosen:updated").trigger("change");
                } else {
                    form.find('.custAction_' + value).prop({'disabled': true, 'selectedIndex': 0, 'value': ''}).trigger("chosen:updated").trigger("change");
                }
            });
        });

Don't know if there's an even shorter way.... But i'm happy at the moment! :-)

Answer 2

You can use loops for this.

$('form').each(function () {
    var form = $(this);
    for(var i = 1; i<= 4 ; i++){
        form.find('.custSwitch_' + i ).change(function () {
            if (form.find('.custSwitch_' + i + ':checked').length) {
                form.find('.custAction_' + i ).prop('disabled', false).trigger("chosen:updated").trigger("change");
            } else {
                form.find('.custAction_' + i ).prop({'disabled': true, 'selectedIndex': 0, 'value':''}).trigger("chosen:updated").trigger("change");
            }
        });
    }
    form.find('.roof').change(function () {
        if (form.find('.roof:checked').length) {
            form.find('.sunroof').prop('disabled', false).trigger("chosen:updated").trigger("change");
            form.find('.antenna').button("enable");
        } else {
            form.find('.sunroof').prop({'disabled': true, 'selectedIndex': 0}).trigger("chosen:updated").trigger("change");
            form.find('.antenna').prop("checked", false).button("refresh").button("disable", "disable");
        }
    });
});