Hướng dẫn css disabled div style - css kiểu div bị vô hiệu hóa

Thử nó

Cú pháp

Ví dụ

Ví dụ này cho thấy một hình thức vận chuyển cơ bản. Nó sử dụng sự kiện JavaScript

 $(this).unbind('click', false);
 $(this).unbind('contextmenu', false);

HTML

<form action="#">
  <fieldset id="shipping">
    <legend>Shipping addresslegend>
    <input type="text" placeholder="Name" />
    <input type="text" placeholder="Address" />
    <input type="text" placeholder="Zip Code" />
  fieldset>
  <br />
  <fieldset id="billing">
    <legend>Billing addresslegend>
    <label for="billing-checkbox">Same as shipping address:label>
    <input type="checkbox" id="billing-checkbox" checked />
    <br />
    <input type="text" placeholder="Name" disabled />
    <input type="text" placeholder="Address" disabled />
    <input type="text" placeholder="Zip Code" disabled />
  fieldset>
form>

CSS

input[type="text"]:disabled {
  background: #ccc;
}

JavaScript

// Wait for the page to finish loading
document.addEventListener(
  "DOMContentLoaded",
  () => {
    // Attach `change` event listener to checkbox
    document.getElementById("billing-checkbox").onchange = toggleBilling;
  },
  false
);

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;
  });
}

Kết quả

Xem thêm