基于HTML/CSS/PHP实现输入框互斥禁用功能求助

Hey there! Let's tackle this step by step. First, I notice a critical issue in your existing code: both inputs share the same id="inputEmail", which breaks HTML rules (IDs must be unique). We'll fix that first so our front-end logic works correctly.

Since this is a real-time user interaction, we'll use vanilla JavaScript to handle the disable/enable behavior—PHP handles server-side logic, so it can't manage dynamic front-end actions like this directly.

Here's the full working implementation:

Step 1: Updated HTML (With Unique IDs) #

First, let's fix the duplicate IDs and clean up the structure:

<div class="form-group">
  <label for="partNumInput">Part Number:</label>
  <input 
    class="form-control" 
    id="partNumInput" 
    type="text" 
    name="partnum" 
    value="<?php echo htmlspecialchars($partnum); ?>" 
    style="width: 400px;"
  >
</div>
<div class="form-group">
  <label for="serialNumInput">Serial Number:</label>
  <input 
    class="form-control" 
    id="serialNumInput" 
    type="text" 
    name="serialnum" 
    value="<?php echo htmlspecialchars($serialnum); ?>" 
    style="width: 400px;"
  >
</div>

Note: I removed the required attribute temporarily—we'll handle validation dynamically, since only one input should be required at a time.

Step 2: JavaScript Interaction Logic #

Add this script right before your closing </body> tag (or in a dedicated JS file):

// Get references to both input elements
const partNumInput = document.getElementById('partNumInput');
const serialNumInput = document.getElementById('serialNumInput');

// Core function to update input states
function toggleInputStates() {
  // If Part Number has content, disable Serial Number and set Part Number as required
  if (partNumInput.value.trim() !== '') {
    serialNumInput.disabled = true;
    serialNumInput.removeAttribute('required');
    partNumInput.setAttribute('required', '');
  } 
  // If Serial Number has content, disable Part Number and set Serial Number as required
  else if (serialNumInput.value.trim() !== '') {
    partNumInput.disabled = true;
    partNumInput.removeAttribute('required');
    serialNumInput.setAttribute('required', '');
  } 
  // If both are empty, enable both and remove required attributes
  else {
    partNumInput.disabled = false;
    serialNumInput.disabled = false;
    partNumInput.removeAttribute('required');
    serialNumInput.removeAttribute('required');
  }
}

// Run on page load to handle pre-filled values from PHP
document.addEventListener('DOMContentLoaded', toggleInputStates);

// Run whenever the user types in either input
partNumInput.addEventListener('input', toggleInputStates);
serialNumInput.addEventListener('input', toggleInputStates);

Key Features Explained: #

• Unique IDs: Using partNumInput and serialNumInput ensures JavaScript can target each input accurately.
• Dynamic Validation: The script adjusts the required attribute based on which input is active—this prevents validation errors for disabled inputs.
• Initial State Handling: The DOMContentLoaded event checks if either input has a pre-filled value from PHP (like $partnum or $serialnum) and sets the correct disabled state immediately when the page loads.
• Whitespace Ignorance: Using trim() ensures accidental spaces don't trigger the disable logic.

Optional CSS (For Better Disabled Input Styling) #

To make disabled inputs more visually distinct, add this to your CSS:

input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.7;
}

内容的提问来源于stack exchange，提问作者FRANCIS TOCAL