基于选择的Javascript禁用/启用输入字段其他字段

问题描述：

我试着按照下面的答案在我的代码中执行此操作：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 %}

答

有您所提供的HTML /脚本的几个问题。

的<script>内容执行存在表单域之前（onload代码未实现你做它的方式。）
你还没有为TfL
你还没挑一个默认值't已禁用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'); 
}

，将永远得到你所禁用的输入。 – VTodorov

谢谢@searlea是的，最后，将我的脚本移动到页面底部使其工作！谢谢==通常我会得到正确的答案。最后使用@Naren代码，纯粹是因为对我而言非常新的DOM部分想要理解。我很困惑，因为我有其他页面：'function showExpl（）{document.getElementById（'Explanation'）。style.display =“block”; document.getElementById（'showbut'）。style.display =“none”; document.getElementById（'hidebut'）。style.display =“block”;上表（不是表格），但仍然完美。所以，无论JS在页面中的哪个位置，都会加载非表单内容？ –

评论中的代码只是定义了一个函数。没关系。最重要的是在页面完成加载之前或之后调用showExpl（）是否被调用（如果它被调用） – searlea

答

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"); 
    } 
}

此外，当比较两个值使用==，而不是=。

问题中的代码显示他正在更新禁用的_property_，而不是属性。将'element.disabled'设置为'true'或'false'的代码很好。 – searlea

代码是绝对正确的'element.disabled'等于'whatever'，但它没有达到他所要求的。 – VTodorov

谢谢@VTododov我对属性和属性之间有什么区别有所反思，因为对于JS还是比较新的东西。 –

答

而不是设置禁用通过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; 
    } 
}

这会给你一个禁用的输入。总是 – VTodorov

哦，我以为他希望它被禁用，只有在输入改变时才能工作。“我希望'TfLroad'默认加载为禁用，然后如果'TfL'从”否“更改为”是“，则应启用”TfLroad“。” –

他确实（我在一读时错过了部分问题。） – searlea

答

所以问题是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>

谢谢@Naren，我运行了你的代码片段，并可以看到它的工作原理。我只是选择你的，因为它看起来很聪明，而且以前我不知道的新东西。它在我的页面上不起作用，这意味着我想我在包含的代码之外还有其他东西在基本模板中停止它。我以前遇到问题，浏览器缓存没有显示更改，但下载了Chrome Cache杀手来停止此操作。我想知道Bootstrap CSS中的任何东西是否会影响JS？我的理解是==应该在这里工作，以及=== –

@WillCroxford当你刷新页面时，按'ctrl + shift + r'这将消除捕捉问题，欢迎您！ –

基于选择的Javascript禁用/启用输入字段其他字段

相关推荐