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

Question

我在我的 php 頁面上遇到了這個問題。 選擇下拉菜單后我無法禁用 3 個輸入區域

如果 slider 的類型選擇為 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 框更改其值后，實際調用 function DisableSliderInputArea 。 您需要添加一個事件偵聽器，因此一旦用戶更改所選選項，您的 function 將被觸發，並且 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>

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>