CODEWITHSUNDEEP
javascriptjqueryhtmlforms
famalgosner
famalgosner

Reputation: 95

Dependencies between input elements with multiple forms per page

I am generating multiple forms with a database. Some of the input field in a form have the tag

dep="XY"

where XY is the name of the dependent input element.

Example:

< input type="checkbox" name="R5" id="c1" dep="R6" >

< input type="radio" name="R6" value="V1">

If the checkbox R5 is enabled it activates the radio button R6

Currently I am using this jquery code to enable/disable the elements:

function onChangeInputRadioCheckboxDependencies() {
var inputs = $('input');
inputs.change(function() {
    inputs.each(function() {
        var dep = $(this).attr('dep');
        if ( typeof dep != 'undefined') {
            var group = $(this).find('input[name=' + dep + ']');
            if ($(this).is(':checked')) {
                group.each(function() {
                    group.removeAttr('disabled');
                });
            } else {
                group.each(function() {
                    group.attr('disabled', true);
                    group.prop('checked', false);
                });
            }
        }
    });
});
}

If only one form is on a page there is no problem. But if there two or more the elements are enabled/disabled within all forms because all inputs are numbered consecutively in each form.

Is there a possibility to find just the elements that are located in the same form? Thanks for your help :-)

Upvotes: 0

Views: 1657

Answers (1)

Anton
Anton

Reputation: 32581

Try 

$(document).ready(function () {
    $('form').on('change', 'input[dep]', function () {
        var dep = $(this).attr('dep');
        var group = $(this).closest('form').find('input[name=' + dep + ']');
        if ($(this).is(':checked')) {
            group.prop('disabled',false);
        } else {
            group.prop('disabled', true);
            group.prop('checked', false);
        }
    });
});

Upvotes: 1

Related Questions