如果下拉列表等于 1，则禁用耦合输入区域

Question

我在我的 php 页面上遇到了这个问题。选择下拉菜单后，我无法禁用 3 个输入区域

如果选择的滑块类型如 1，我只想禁用不相关的输入区域，否则什么也不做

用于条件的HTML代码：

<div class="form-group">
<label for="slider_type">Slider Type</label>

<select name="slider_type" class="form-select" id="slider_type" required>

<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>

</select>
</div>

如果 slider_type 等于 1，我想禁用的 HTML 代码

<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
</div>
</div>
<div class="col-md-6 mb-4">
    <div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
    <div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>

我为 1 个输入区域尝试了这段 JavaScript 代码行，但没有成功

            <script type="text/javascript">

function DisableSliderInputArea(){
   
  if(document.getElementById("slider_type").value=="1"){
      document.getElementById("slider_title").disabled = true;
  } else {
    document.getElementById("slider_title").disabled = false;
  } 
                  
} 

    </script>

到底出了什么问题？

Answer 1

您几乎已经完成了所有工作，缺少的一件事是在您的选择框更改其值后实际调用函数DisableSliderInputArea。您需要添加一个事件侦听器，因此一旦用户更改所选选项，您的函数将被触发，并且 textarea 将被禁用或启用。

请随意运行下面的 sn-p，看看它是如何工作的。我在你需要在 JS 部分添加的行上添加了 cmets。

function DisableSliderInputArea() {
  if (document.getElementById("slider_type").value == "1") {
    document.getElementById("slider_title").disabled = true;
  } else {
    document.getElementById("slider_title").disabled = false;
  }
}

// Get the select out of the DOM and store in a local variable
const dropdown = document.getElementById("slider_type");

// Attach an event listener, so once the select changes
// its' value, this function will be called
dropdown.addEventListener("change", DisableSliderInputArea);

<div class="form-group">
         <label for="slider_type">Slider Type</label>
         <select name="slider_type" class="form-select" id="slider_type" required>
            <option value="" disabled selected>Please Select</option>
            <option value="1">Image</option>
            <option value="2">Video</option>
         </select>
      </div>
      <label for="slider_title">Slider Title</label>
      <input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
      </div>
      </div>
      <div class="col-md-6 mb-4">
         <div class="form-group">
            <label for="slider_description">Slider Body</label>
            <input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
         </div>
      </div>
      <div class="col-md-6 mb-4">
         <div class="form-group">
            <label for="slider_button_link">Slider Button Link</label>
            <input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
         </div>
      </div>

Answer 2

你差不多完成了，只是错误地设置了 onchange="DisableSliderInputArea()"

function DisableSliderInputArea(){
  if(document.getElementById("slider_type").value=="1"){
      document.getElementById("slider_title").disabled = true;
  } else {
    document.getElementById("slider_title").disabled = false;
  } 
                  
} 

<div class="form-group">
  <label for="slider_type">Slider Type</label>

  <select name="slider_type" class="form-select" id="slider_type" onchange="DisableSliderInputArea()" required>

    <option value="" disabled selected>Please Select</option>
    <option value="1">Image</option>
    <option value="2">Video</option>

  </select>
</div>
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" required>
<div class="col-md-6 mb-4">
  <div class="form-group">
    <label for="slider_description">Slider Body</label>
    <input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
  </div>
</div>
<div class="col-md-6 mb-4">
  <div class="form-group">
    <label for="slider_button_link">Slider Button Link</label>
    <input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
  </div>
</div>