如果下拉串列等于1，則禁用耦合輸入區域

我在我的 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>

真的有什么問題？

uj5u.com熱心網友回復：

你幾乎已經完成了所有的作業，缺少的一件事是DisableSliderInputArea一旦你的選擇框改變了它的值，函式的實際呼叫。您需要添加一個事件偵聽器，因此一旦用戶更改所選選項，您的函式將被觸發，并且 textarea 將被禁用或啟用。

隨意運行下面的代碼片段，看看它是如何作業的。我在 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>

uj5u.com熱心網友回復：

你快完成了，只是錯誤地把 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>

標籤：

上一篇：在python中獲得所有可能的除數很熱

下一篇：為什么我的嵌套回圈沒有在帶有if陳述句的while陳述句中執行