[英]Javascript disable/enable input field based on selection other field
我嘗試按照以下答案在代碼中執行此操作: 選擇某些選擇列表值但對我不起作用時,如何禁用輸入字段 。
我有一個帶有“是/否”答案的HTML選擇字段ID“ TfL”,下一個字段“ TfLroad”是一個輸入字段。 我希望默認情況下將“ TfLroad”加載為禁用狀態,然后如果“ TfL”從“否”更改為“是”,則應啟用“ TfLroad”。
下面是整個頁面的代碼,文件頂部是JS,底部是這兩個字段,請發送任何建議!:
{% extends "base.jinja2" %}
{% block content %}
<script>
// value 0 for No answer to TfL road 1 for, in which case disabled, on change should
// enable TfLroad element by setting disabled = false, but not working yet!
document.getElementById("TfLroad").onload = function () {
document.getElementById("TfLroad").disabled = true;
}
document.getElementById('TfL').onchange = function () {
if(this.value = '0') {
document.getElementById("TfLroad").disabled = true;
}
else {
document.getElementById("TfLroad").disabled = false;
}
}
</script>
<h2 style="text-align:center">Add A 'Dummy' Street</h2>
<p>You can create a Dummy street here, which you will be able to search for in this application. This is to
demonstrate how a real Create & Update Process could work for this application, without corrupting the original
data. Dummy streets are indicated in search results.</p>
<form class="form-horizontal" action = "" method="post">
<fieldset>
<div class="form-group">
<div class="col-lg-6">
<label for="stname" class="control-label">Street Name</label>
<input class="form-control" id="stname" name="stname" pattern="^\S.{3,98}\S$"
title="Sorry, you must type from 5 to 100 characters, and no space at beginning or end."
placeholder="Full Street Name" required>
<!-- required attribute needed because empty string bypasses the pattern regex. -->
<span class="help-block">NB: No naughty word streets please, these will be deleted by admin!</span>
</div>
<!-- CR, CL, PR, 25, 16, 19, BE, KN, SC, TH, WA, WH -->
<div class="col-lg-3">
<label for="distr" class="control-label">Postal District</label>
<select class="form-control" id="distr" name="distr">
<option>Croydon (CR0, CR2, CR7 or CR9)</option>
<option>Coulsdon CR5</option>
<option>Purley CR8</option>
<option>London SE25</option>
<option>London SW16</option>
<option>Kenley CR8</option>
<option>South Croydon CR2</option>
<option>Thornton Heath CR7</option>
<option>Warlingham CR6</option>
<option>Whyteleafe CR3</option>
<option>Beckenham BR3</option>
</select>
<span class="help-block">NB: Original data uses postal district only, hence problem with several postcodes for Croydon.</span>
</div>
<div class="col-lg-3">
<label for="maint" class="control-label">Who looks after this street?</label>
<select class="form-control" id="maint" name="maint">
<option>Croydon Borough</option>
<option>Transport for London</option>
<option>Private Road</option>
</select>
</div>
</div>
<div class="form-group">
<h4 class="centre">Street Number Limits for this Street Section<br/><small>Please leave as None if all properties in this section have names</small></h4>
</div>
<div class="form-group">
<div class="col-lg-3">
<label for="onb" class="control-label">Odd Numbers From</label>
<input class="form-control" id="onb" name="onb" value="None" pattern="^\d*[13579]$|(None)" title="Odd Numbers only please with no spaces, or None">
<span class="help-block">e.g. '1' or '111'</span>
</div>
<div class="col-lg-3">
<label for="one" class="control-label">Odd Numbers To</label>
<input class="form-control" id="one" name="one" value="None" pattern="^\d*[13579]$|(None)" title="Odd Numbers only please with no spaces, or None">
<span class="help-block">e.g. '31' or '217'</span>
</div>
<div class="col-lg-3">
<label for="enb" class="control-label">Even Numbers From</label>
<input class="form-control" id="enb" name="enb" value="None" pattern="^\d*[02468]$|(None)" title="Even Numbers only please with no spaces, or None">
<span class="help-block">e.g. '2' or '110'</span>
</div>
<div class="col-lg-3">
<label for="ene" class="control-label">Even Numbers To</label>
<input class="form-control" id="ene" name="ene" value="None" pattern="^\d*[02468]$|^(None)$" title="Even Numbers only please with no spaces, or None">
<span class="help-block">e.g. '32' or '216'</span>
</div>
</div>
<div class="form-group">
<div class="col-lg-4">
<label for="rdclass" class="control-label">Road Class</label>
<select class="form-control" id="rdclass" name="rdclass">
<option>Unclassified</option>
<option>A Road</option>
<option>B Road</option>
<option>C Road</option>
</select>
<span class="help-block">Leave as Unclassified if in any doubt.</span>
</div>
<div class="col-lg-4">
<label for="length" class="control-label">Length of this Street Section (whole no. metres)</label>
<input class="form-control" id="length" name="length" value= 0 pattern="^[1-9][0-9]*$" title="Whole number of metres please, no spaces!" required>
</div>
<div class="col-lg-4">
<!-- JS here to put in A B C / disable depending on what selected in rdclass box -->
<label for="rdnum" class="control-label">Road Number</label>
<input class="form-control" id="rdnum" name="rdnum" pattern="^[ABC][1-9][0-9]*$|^(None)$" title="Must be None, or A, B or C followed by a whole number for the road class, no spaces!" value="None" required>
<span class="help-block">Only for A/B/C roads e.g. 'A232', 'C3241'</span>
</div>
</div>
<div class="form-group">
<div class="col-lg-3">
<label class="control-label left">Does one end of this street adjoin a TfL maintained street?</label>
<select class="form-control" id="TfL">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="col-lg-4">
<!-- JS not working yet to disable only if no selected in rdclass box -->
<label class="control-label"><br/> Road Number of Adjoining TfL Road?</label>
<input class="form-control" pattern="^[ABC][1-9][0-9]*$|^(None)$"
title="Must be None, or A, B or C followed by a whole number, no spaces!" value="None" id="TfLroad" required>
<span class="help-block">E.g. 'A232', 'B2441'</span>
</div>
</div>
<div class="form-group">
<div class="centre">
<button type="reset" class="btn btn-default">Reset Form</button>
<button type="submit" class="btn btn-primary">Create Street</button>
</div>
</div>
</fieldset>
</form>
{% endblock %}
代替通過javascript設置禁用,您可以將禁用添加到HTML輸入元素:
<input class="form-control" disabled="disabled" .... />
然后在您的JavaScript中:
document.getElementById('TfL').onchange = function ()
{
if (this.value == '0')
{
document.getElementById("TfLroad").disabled = true;
}
else
{
document.getElementById("TfLroad").disabled = false;
}
}
disabled
是布爾值屬性。 您不會通過將元素的屬性設置為disabled=false
來disabled=false
它。 瀏覽器將檢查您的元素是否具有disabled
屬性,並且不關心其元素的disabled=true
, disabled=false
, disabled=elephant
。 為了“啟用”您的元素,您必須完全刪除disabled
屬性。
這應該工作:
document.getElementById('TfL').onchange = function () {
if(this.value == '0') {
document.getElementById("TfLroad").disabled = "elephant";
}
else {
document.getElementById("TfLroad").removeAttr("disabled");
}
}
同樣,在比較兩個值時,請使用==
而不是=
。
您提供的HTML /腳本中存在幾個問題。
<script>
內容在表單字段存在之前onload
執行(未按您的方式實現onload
代碼。) TfL
的默認值 TfLroad
固定順序:
<script>
移到頁面底部並刪除onload
函數。 假設您希望默認情況下No
選擇:
<select class="form-control" id="TfL"> <option value="0" selected>No</option> <option value="1">Yes</option> </select>
添加disabled
屬性
<input class="form-control" pattern="^[ABC][1-9][0-9]*$|^(None)$" disabled title="Must be None, or A, B or C followed by a whole number, no spaces!" value="None" id="TfLroad" required>
用usie =
代替==
(或===
):
if(this.value = '0') {
應該
if(this.value === '0') {
(您也可以重寫onchange處理程序):
document.getElementById('TfL').onchange = function () {
document.getElementById("TfLroad").disabled = (this.value === '0');
}
因此問題是load
事件無法在所有元素上都起作用,它僅支持以下HTML標記。
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">,
<link>, <script> and <style>
請參閱此處了解更多信息。
另外,我已經更改了應用初始禁用條件的邏輯,請檢查一下!
作為替代方案,您可以改為查看document.ready
,然后應用此更改。 請參考以下代碼段。
var select = document.getElementById('TfL'), input = document.getElementById("TfLroad"); document.addEventListener("DOMContentLoaded", function(event) { if (select.value === '0') { input.disabled = true; } else { input.disabled = false; } }); select.onchange = function() { if (this.value === '0') { input.disabled = true; } else { input.disabled = false; } }
<h2 style="text-align:center">Add A 'Dummy' Street</h2> <p>You can create a Dummy street here, which you will be able to search for in this application. This is to demonstrate how a real Create & Update Process could work for this application, without corrupting the original data. Dummy streets are indicated in search results.</p> <form class="form-horizontal" action="" method="post"> <fieldset> <div class="form-group"> <div class="col-lg-6"> <label for="stname" class="control-label">Street Name</label> <input class="form-control" id="stname" name="stname" pattern="^\\S.{3,98}\\S$" title="Sorry, you must type from 5 to 100 characters, and no space at beginning or end." placeholder="Full Street Name" required> <!-- required attribute needed because empty string bypasses the pattern regex. --> <span class="help-block">NB: No naughty word streets please, these will be deleted by admin!</span> </div> <!-- CR, CL, PR, 25, 16, 19, BE, KN, SC, TH, WA, WH --> <div class="col-lg-3"> <label for="distr" class="control-label">Postal District</label> <select class="form-control" id="distr" name="distr"> <option>Croydon (CR0, CR2, CR7 or CR9)</option> <option>Coulsdon CR5</option> <option>Purley CR8</option> <option>London SE25</option> <option>London SW16</option> <option>Kenley CR8</option> <option>South Croydon CR2</option> <option>Thornton Heath CR7</option> <option>Warlingham CR6</option> <option>Whyteleafe CR3</option> <option>Beckenham BR3</option> </select> <span class="help-block">NB: Original data uses postal district only, hence problem with several postcodes for Croydon.</span> </div> <div class="col-lg-3"> <label for="maint" class="control-label">Who looks after this street?</label> <select class="form-control" id="maint" name="maint"> <option>Croydon Borough</option> <option>Transport for London</option> <option>Private Road</option> </select> </div> </div> <div class="form-group"> <h4 class="centre">Street Number Limits for this Street Section<br/><small>Please leave as None if all properties in this section have names</small></h4> </div> <div class="form-group"> <div class="col-lg-3"> <label for="onb" class="control-label">Odd Numbers From</label> <input class="form-control" id="onb" name="onb" value="None" pattern="^\\d*[13579]$|(None)" title="Odd Numbers only please with no spaces, or None"> <span class="help-block">eg '1' or '111'</span> </div> <div class="col-lg-3"> <label for="one" class="control-label">Odd Numbers To</label> <input class="form-control" id="one" name="one" value="None" pattern="^\\d*[13579]$|(None)" title="Odd Numbers only please with no spaces, or None"> <span class="help-block">eg '31' or '217'</span> </div> <div class="col-lg-3"> <label for="enb" class="control-label">Even Numbers From</label> <input class="form-control" id="enb" name="enb" value="None" pattern="^\\d*[02468]$|(None)" title="Even Numbers only please with no spaces, or None"> <span class="help-block">eg '2' or '110'</span> </div> <div class="col-lg-3"> <label for="ene" class="control-label">Even Numbers To</label> <input class="form-control" id="ene" name="ene" value="None" pattern="^\\d*[02468]$|^(None)$" title="Even Numbers only please with no spaces, or None"> <span class="help-block">eg '32' or '216'</span> </div> </div> <div class="form-group"> <div class="col-lg-4"> <label for="rdclass" class="control-label">Road Class</label> <select class="form-control" id="rdclass" name="rdclass"> <option>Unclassified</option> <option>A Road</option> <option>B Road</option> <option>C Road</option> </select> <span class="help-block">Leave as Unclassified if in any doubt.</span> </div> <div class="col-lg-4"> <label for="length" class="control-label">Length of this Street Section (whole no. metres)</label> <input class="form-control" id="length" name="length" value=0 pattern="^[1-9][0-9]*$" title="Whole number of metres please, no spaces!" required> </div> <div class="col-lg-4"> <!-- JS here to put in ABC / disable depending on what selected in rdclass box --> <label for="rdnum" class="control-label">Road Number</label> <input class="form-control" id="rdnum" name="rdnum" pattern="^[ABC][1-9][0-9]*$|^(None)$" title="Must be None, or A, B or C followed by a whole number for the road class, no spaces!" value="None" required> <span class="help-block">Only for A/B/C roads eg 'A232', 'C3241'</span> </div> </div> <div class="form-group"> <div class="col-lg-3"> <label class="control-label left">Does one end of this street adjoin a TfL maintained street?</label> <select class="form-control" id="TfL"> <option value="0">No</option> <option value="1">Yes</option> </select> </div> <div class="col-lg-4"> <!-- JS not working yet to disable only if no selected in rdclass box --> <label class="control-label"><br/> Road Number of Adjoining TfL Road?</label> <input class="form-control" pattern="^[ABC][1-9][0-9]*$|^(None)$" title="Must be None, or A, B or C followed by a whole number, no spaces!" value="None" id="TfLroad" required> <span class="help-block">Eg 'A232', 'B2441'</span> </div> </div> <div class="form-group"> <div class="centre"> <button type="reset" class="btn btn-default">Reset Form</button> <button type="submit" class="btn btn-primary">Create Street</button> </div> </div> </fieldset> </form>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.