0

I have a view with search criteria and the search criteria looks like below:

Age group(options: new born, toddler, pre-school) Classroom (options: NA, potty-trained, transition, not-trained) All these filter fields are check boxes.

When I select 'new born' as age-group, all of the classroom options should be hidden/disabled except NA option When I select 'toddler/pre-school' all of the classroom options should show up again except NA option

I am using the below code for doing this:

$('#edit-field-agegroup-value-1').click(function() {
    if( $(this).is(':checked')) {
        $("#edit-field-classroom-value-3").prop('disabled', true);
     } else {
        $("#edit-field-classroom-value-3").prop('disabled', false); 
     }
    });

This code is working fine. However, when I submit the refresh button the page refreshes and the disabled fields show enabled again. Any help on how this can be fixed?

2
  • 2
    Does this answer your question? #states visible
    – leymannx
    Mar 31 '20 at 13:12
  • That's a job for Form API #states. If you are asking for JS that would be off-topic.
    – leymannx
    Mar 31 '20 at 13:13
1

Run the check on page page load, not just on click:

 ... wrapped in the usual Drupal boilerplate

disableFilter($('#edit-field-agegroup-value-1'));

$('#edit-field-agegroup-value-1').click(function() {
    disableFilter($(this));
});

function disableFilter(element) {
    if( element.is(':checked')) {
        $("#edit-field-classroom-value-3").prop('disabled', true);
     } else {
        $("#edit-field-classroom-value-3").prop('disabled', false); 
     }    
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.