Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(css): updated :disabled example #32486

Merged
merged 2 commits into from
Feb 29, 2024

Conversation

srikanth-kandi
Copy link
Contributor

Fixes #32481

Changed DOMContentLoaded to click event in JavaScript.

colon-disabled-updated-example.mp4

@srikanth-kandi srikanth-kandi requested a review from a team as a code owner February 29, 2024 16:26
@srikanth-kandi srikanth-kandi requested review from chrisdavidmills and removed request for a team February 29, 2024 16:26
@github-actions github-actions bot added Content:CSS Cascading Style Sheets docs size/xs [PR only] 0-5 LoC changed labels Feb 29, 2024
Copy link
Contributor

github-actions bot commented Feb 29, 2024

Preview URLs

(comment last updated: 2024-02-29 23:35:00)

@wbamberg
Copy link
Collaborator

I think you could just do this:

document.getElementById("billing-checkbox").onchange = toggleBilling;

function toggleBilling() {
  // Select the billing text fields
  const billingItems = document.querySelectorAll('#billing input[type="text"]');

  // Toggle the billing text fields
  billingItems.forEach((item) => {
    item.disabled = !item.disabled;
  });
}

...or with addEventListener:

document
  .getElementById("billing-checkbox")
  .addEventListener("change", toggleBilling);

function toggleBilling() {
  // Select the billing text fields
  const billingItems = document.querySelectorAll('#billing input[type="text"]');

  // Toggle the billing text fields
  billingItems.forEach((item) => {
    item.disabled = !item.disabled;
  });
}

@github-actions github-actions bot added size/s [PR only] 6-50 LoC changed and removed size/xs [PR only] 0-5 LoC changed labels Feb 29, 2024
Copy link
Collaborator

@hamishwillee hamishwillee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

THanks very much! I've further simplified the example - no need for the double event listener.

@hamishwillee
Copy link
Collaborator

hamishwillee commented Feb 29, 2024

@wbamberg Dunno how I missed your review. I took the time to do something similar to your suggestions - don't like using the onX handlers. I'm happy with it so self merging (it is tested)

@hamishwillee hamishwillee merged commit 5fef5d3 into mdn:main Feb 29, 2024
9 checks passed
@srikanth-kandi srikanth-kandi deleted the fix/colon-disabled-example branch March 1, 2024 01:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:CSS Cascading Style Sheets docs size/s [PR only] 6-50 LoC changed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

:disabled example doesn't work
3 participants