如果下拉等于 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>

HTML 如果 slider_type 等于 1

我想禁用的代码

<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

您几乎完成了所有工作，缺少的一件事是一旦您的 select 框更改了它的值，函数 DisableSliderInputArea 的实际调用。您需要添加一个事件侦听器，因此一旦用户更改 selected 选项，您的函数就会被触发，文本区域将被禁用或启用。

请随意运行下面的代码片段，看看它是如何工作的。我在 JS 部分对您需要添加的行添加了注释。

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>

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

Disabling couple input area if dropdown equal to 1

html

javascript

if-statement

disabled-input

dropdown