2017-10-18 102 views
0

我試着按照下面的答案在我的代碼中執行此操作:How do I disable input field when certain select list value is picked但不適用於我。基於選擇的Javascript禁用/啓用輸入字段其他字段

我有一個HTML選擇字段ID'TfL'與是/否回答,並且下一個字段'TfLroad'是一個輸入字段。我希望'TfLroad'默認加載爲禁用,然後如果'TfL'從No更改爲Yes,則應啓用'TfLroad'。下面

整頁的代碼,JS文件頂部,這兩個字段旁邊的底部,TX任何建議!:

{% 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 &amp; 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/>&nbsp;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 %} 

回答

1

有您所提供的HTML /腳本的幾個問題。

  1. <script>內容執行存在表單域之前(onload代碼未實現你做它的方式。)
  2. 你還沒有爲TfL
  3. 你還沒挑一個默認值't已禁用TfLroad
  4. 您在比較中輸入了錯字。

固定順序:

  1. <script>到頁面的底部,並刪除onload功能。
  2. 假設你要No默認選擇:

    <select class="form-control" id="TfL"> 
        <option value="0" selected>No</option> 
        <option value="1">Yes</option> 
        </select> 
    
  3. 添加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> 
    
  4. usie =代替==(或===):

    if(this.value = '0') { 
    

應該

if(this.value === '0') { 

(你也可以重寫onChange處理):

document.getElementById('TfL').onchange = function() { 
    document.getElementById("TfLroad").disabled = (this.value === '0'); 
} 
+0

,將永遠得到你所禁用的輸入。 – VTodorov

+0

謝謝@searlea是的,最後,將我的腳本移動到頁面底部使其工作!謝謝==通常我會得到正確的答案。最後使用@Naren代碼,純粹是因爲對我而言非常新的DOM部分想要理解。我很困惑,因爲我有其他頁面:'function showExpl(){document.getElementById('Explanation')。style.display =「block」; document.getElementById('showbut')。style.display =「none」; document.getElementById('hidebut')。style.display =「block」;上表(不是表格),但仍然完美。所以,無論JS在頁面中的哪個位置,都會加載非表單內容? –

+0

評論中的代碼只是定義了一個函數。沒關係。最重要的是在頁面完成加載之前或之後調用showExpl()是否被調用(如果它被調用) – searlea

2

disabled是一個布爾屬性。您不要通過將其屬性設置爲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"); 
    } 
} 

此外,當比較兩個值使用==,而不是=

+0

問題中的代碼顯示他正在更新禁用的_property_,而不是屬性。將'element.disabled'設置爲'true'或'false'的代碼很好。 – searlea

+0

代碼是絕對正確的'element.disabled'等於'whatever',但它沒有達到他所要求的。 – VTodorov

+0

謝謝@VTododov我對屬性和屬性之間有什麼區別有所反思,因爲對於JS還是比較新的東西。 –

4

而不是設置禁用通過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; 
    } 
} 
+0

這會給你一個禁用的輸入。總是 – VTodorov

+0

哦,我以爲他希望它被禁用,只有在輸入改變時才能工作。「我希望'TfLroad'默認加載爲禁用,然後如果'TfL'從」否「更改爲」是「,則應啓用」TfLroad「。」 –

+0

他確實(我在一讀時錯過了部分問題。) – searlea

1

所以問題是load事件不起作用上所有元素,它只支持下面的HTML標籤。

<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, 
<link>, <script> and <style> 

請參閱here瞭解更多。

另外我已經更改了應用初始禁用條件的邏輯,請檢查它!

作爲替代,您可以注意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 &amp; 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/>&nbsp;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>

+0

謝謝@Naren,我運行了你的代碼片段,並可以看到它的工作原理。我只是選擇你的,因爲它看起來很聰明,而且以前我不知道的新東西。它在我的頁面上不起作用,這意味着我想我在包含的代碼之外還有其他東西在基本模板中停止它。我以前遇到問題,瀏覽器緩存沒有顯示更改,但下載了Chrome Cache殺手來停止此操作。我想知道Bootstrap CSS中的任何東西是否會影響JS?我的理解是==應該在這裏工作,以及=== –

+0

@WillCroxford當你刷新頁面時,按'ctrl + shift + r'這將消除捕捉問題,歡迎您! –

相關問題