页面加载时jQuery函数disableNG未生效，下拉框选项无法禁用

Hey there! It’s super common to run into this kind of problem where a function works in event handlers but not on initial page load—let’s figure out why and get it sorted.

Why Your Initial disableNG() Call Isn’t Working #

The most likely culprit is timing: your document.ready runs when the DOM is parsed, but if those dropdowns are dynamically generated (e.g., loaded via AJAX, rendered by a framework like WooCommerce bundle scripts, or injected after the initial DOM load), they might not exist yet when disableNG() fires. When you call it in .change() handlers later, the dropdowns are already on the page, so the function works as expected.

Another small but important issue: using .attr() instead of .prop() for the disabled attribute. For boolean properties like disabled, .attr() can be unreliable because it modifies the HTML attribute, not the actual DOM element state.

Fixes to Try #

1. Switch to window.load Instead of document.ready

window.load waits for all page resources (including dynamically loaded DOM elements) to finish loading, which ensures your dropdowns exist when you try to disable them:

jQuery(window).on('load', function(){
  function disableNG(){
    // Use .prop() for boolean properties like disabled (more reliable)
    jQuery('[name=bundle_attribute_pa_maat_163], [name=bundle_attribute_pa_maat_160]')
      .find('option:eq(0), option:eq(1)')
      .prop("disabled", true);
  };
  disableNG();
});

2. Call disableNG() After Dynamic Content Loads

If your dropdowns are loaded via AJAX or a platform-specific script, hook into the event that fires after those elements are added to the page. For example, in an AJAX success callback:

// Example AJAX call (adjust to match your actual content loading code)
jQuery.ajax({
  url: '/path/to/load/bundle-options',
  success: function(response){
    // Insert the loaded content into the page first
    jQuery('.bundle-container').html(response);
    // Now disable the options
    disableNG();
  }
});

3. Use a Mutation Observer for Dynamic Elements

If you don’t have direct access to the code that loads the dropdowns, a Mutation Observer can watch for when the elements are added to the DOM:

function disableNG(){
  jQuery('[name=bundle_attribute_pa_maat_163], [name=bundle_attribute_pa_maat_160]')
    .find('option:eq(0), option:eq(1)')
    .prop("disabled", true);
}

// Watch the parent container where dropdowns are injected (update the selector!)
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length) {
      const dropdowns = jQuery('[name=bundle_attribute_pa_maat_163], [name=bundle_attribute_pa_maat_160]');
      if (dropdowns.length) {
        disableNG();
        observer.disconnect(); // Stop observing once we've made the change
      }
    }
  });
});

// Start observing (replace '.bundle-parent' with your actual parent element selector)
observer.observe(document.querySelector('.bundle-parent'), {
  childList: true,
  subtree: true
});

Quick Check: Verify Your Selectors #

Before diving into timing fixes, double-check that your selectors are correct! Open your browser’s developer console (F12) and run:

jQuery('[name=bundle_attribute_pa_maat_163]')

If this returns an empty jQuery object, your selector is wrong—make sure the name attributes match exactly what’s in your HTML.

内容的提问来源于stack exchange，提问作者Arne De Belser