根据组合框值启用/禁用 txtBox

【问题标题】：Enable/Disable a txtBox according to comboBox value根据组合框值启用/禁用 txtBox
【发布时间】：2019-05-07 07:31:46
【问题描述】：

我问你以下问题，我必须确保根据组合框的值的选择，某些文本框/某些按钮被禁用..在论坛上查找我找到了这个解决方案，但它不起作用......

Enable an HTML form text box based on the value of a drop down menu in the same form?

我正在附上我的代码...

function changeTextBox() {
    comp = document.getElementById('tipologiaMezzoSubAffidataria');
    if(comp.value=='1 - Mezzi d opera')
        document.getElementById('documentiRadioComando').disabled=true;
		document.getElementById('realizzazioneBasamento').disabled=true;
		document.getElementById('rischioFulminazione').disabled=true;
		document.getElementById('denunciaMessaInServizioInail').disabled=true;
		document.getElementById('verificaPeriodicaInail').disabled=true;
		document.getElementById('ultimaVerificaPeriodicaASL').disabled=true;
		document.getElementById('scadenzaUltimaVerificaMezzoSubAffidataria').disabled=true;
		document.getElementById('verificaTrimestraleFuni').disabled=true;
		document.getElementById('scadenzaUltimaVerificaFuniMezzoSubAffidataria').disabled=true;
    else;
	if(comp.value=='2 - Automezzi')
		document.getElementById('certificatoConformitàCE').disabled=true;
        document.getElementById('registroPeriodicheInterne').disabled=true;
		document.getElementById('documentiRadioComando').disabled=true;
		document.getElementById('realizzazioneBasamento').disabled=true;
		document.getElementById('correttaEsecuzioneBasamento').disabled=true;
		document.getElementById('rischioFulminazione').disabled=true;
		document.getElementById('denunciaMessaInServizioInail').disabled=true;
		document.getElementById('verificaPeriodicaInail').disabled=true;
		document.getElementById('ultimaVerificaPeriodicaASL').disabled=true;
		document.getElementById('scadenzaUltimaVerificaMezzoSubAffidataria').disabled=true;
		document.getElementById('verificaTrimestraleFuni').disabled=true;
		document.getElementById('scadenzaUltimaVerificaFuniMezzoSubAffidataria').disabled=true;
    else;
	
	 if(comp.value=='4 - Attrezzature')
        document.getElementById('annoCostruzioneMezzoSubAffidataria').disabled=true;
	    document.getElementById('certificatoConformitàCE').disabled=true;
		document.getElementById('librettoDiUsoEManutenzione').disabled=true;
		document.getElementById('librettoDiCircolazione').disabled=true;
        document.getElementById('registroPeriodicheInterne').disabled=true;
		document.getElementById('documentiRadioComando').disabled=true;
		document.getElementById('realizzazioneBasamento').disabled=true;
		document.getElementById('correttaEsecuzioneBasamento').disabled=true;
		document.getElementById('rischioFulminazione').disabled=true;
		document.getElementById('denunciaMessaInServizioInail').disabled=true;
		document.getElementById('verificaPeriodicaInail').disabled=true;
		document.getElementById('ultimaVerificaPeriodicaASL').disabled=true;
		document.getElementById('scadenzaUltimaVerificaMezzoSubAffidataria').disabled=true;
		document.getElementById('verificaTrimestraleFuni').disabled=true;
		document.getElementById('scadenzaUltimaVerificaFuniMezzoSubAffidataria').disabled=true;
    else;
}
<table cellspacing="0" cellpadding="0"  id="table4" name="table4"  class=" table order-list"> <tr>
       <form method="POST" action='azioniContinua/inserisciMezzoSubAffidatario.php'>

		<td  style="vertical-align: middle;" align="center" class="coloreTdAttiva">SI/NO</br><input  type="checkbox" class="chkView"/></td>
	    <td bgcolor="#DCDCDC"><input type="text" name="idMezzoAttrezzaturaSubAffidataria" id="idMezzoAttrezzaturaSubAffidataria" width="75px" class="form-control chkEdit larghezzaBase" enable></td>
	  <td width="144" bgcolor="#6DFD1E">AUTORIZZATO    /<br>NON AUTORIZZATO / <br> DOCUMENTI IN SCADENZA</td>
	    <td>
 		<select name="tipologiaMezzoSubAffidataria" id="tipologiaMezzoSubAffidataria" class="form-control chkEdit larghezzaBase" enable onChange="changeTextBox();">
  			
			<option value="1 - Mezzi d opera">1 - Mezzi d opera</option>
			<option value="2 - Automezzi">2 - Automezzi</option>
			<option value="3 - Mezzi di sollevamento (All. VII del D-Lgs. 81/08)">3 - Mezzi di sollevamento (All. VII del D-Lgs. 81/08)</option>
			<option value="4 - Attrezzature">4 - Attrezzature</option>
			
			   
  			
			
 </select>
 </td>
	    <td><input type="text" name="sottoTipologiaMezzoSubAffidataria" id="sottoTipologiaMezzoSubAffidataria" width="75px" class="form-control chkEdit larghezzaBase" enable></td>
	    <td><input type="text" name="marcaMezzoSubAffidataria" id="marcaMezzoSubAffidataria" width="75px" class="form-control chkEdit larghezzaBase" enable></td>
		<td><input type="text" name="modelloMezzoSubAffidataria" id="modelloMezzoSubAffidataria" width="75px" class="form-control chkEdit larghezzaBase" enable></td>
	    <td><input type="text" name="matricolaMezzoSubAffidataria" id="matricolaMezzoSubAffidataria" width="75px" class="form-control chkEdit larghezzaBase" enable></td>
	    <td><input type="date" name="annoCostruzioneMezzoSubAffidataria" id="annoCostruzioneMezzoSubAffidataria" width="75px" class="form-control chkEdit larghezzaBase" enable></td>
	    <td  class="coloreTdDrop" align="center">
		<div id="drop_file_zone" ondrop="upload_file(event)" style=" width: 100%; border: 1px dashed black;" ondragover="return false">	
			<div id="drag_upload_file" >
				<p>CARICA FILE<p/>
				<input type="file" id="selectfile">
			</div>
		<input type="button" value="Seleziona File" id="certificatoConformitàCE" class="btn btn-success" onclick="file_explorer();">
		</div>
	</td><td  class="coloreTdDrop" align="center">
		<div id="drop_file_zone" ondrop="upload_file(event)" style=" width: 100%; border: 1px dashed black;" ondragover="return false">	
			<div id="drag_upload_file" >
				<p>CARICA FILE<p/>
				<input type="file" id="selectfile">
			</div>
		<input type="button" value="Seleziona File" id="librettoDiUsoEManutenzione" class="btn btn-success" onclick="file_explorer();">
		</div>
	</td>
	   <td  class="coloreTdDrop" align="center">
		<div id="drop_file_zone" ondrop="upload_file(event)" style=" width: 100%; border: 1px dashed black;" ondragover="return false">	
			<div id="drag_upload_file" >
				<p>CARICA FILE<p/>
				<input type="file" id="selectfile">
			</div>
		<input type="button" value="Seleziona File" id="librettoDiCircolazione" class="btn btn-success" onclick="file_explorer();">
		</div>
	</td>
	    <td  class="coloreTdDrop" align="center">
		<div id="drop_file_zone" ondrop="upload_file(event)" style=" width: 100%; border: 1px dashed black;" ondragover="return false">	
			<div id="drag_upload_file" >
				<p>CARICA FILE<p/>
				<input type="file" id="selectfile">
			</div>
		<input type="button" value="Seleziona File" id="registroPeriodicheInterne" class="btn btn-success" onclick="file_explorer();">
		</div>
	</td>
	   <td  class="coloreTdDrop" align="center">
		<div id="drop_file_zone" ondrop="upload_file(event)" style=" width: 100%; border: 1px dashed black;" ondragover="return false">	
			<div id="drag_upload_file" >
				<p>CARICA FILE<p/>
				<input type="file" id="selectfile">
			</div>
		<input type="button" value="Seleziona File" id="documentiRadioComando" class="btn btn-success" onclick="file_explorer();">
		</div>
	</td>
	   <td  class="coloreTdDrop" align="center">
		<div id="drop_file_zone" ondrop="upload_file(event)" style=" width: 100%; border: 1px dashed black;" ondragover="return false">	
			<div id="drag_upload_file" >
				<p>CARICA FILE<p/>
				<input type="file" id="selectfile">
			</div>
		<input type="button" value="Seleziona File" id="realizzazioneBasamento" class="btn btn-success" onclick="file_explorer();">
		</div>
	</td>
	    <td  class="coloreTdDrop" align="center">
		<div id="drop_file_zone" ondrop="upload_file(event)" style=" width: 100%; border: 1px dashed black;" ondragover="return false">	
			<div id="drag_upload_file" >
				<p>CARICA FILE<p/>
				<input type="file" id="selectfile">
			</div>
		<input type="button" value="Seleziona File"  id="correttaEsecuzioneBasamento" class="btn btn-success" onclick="file_explorer();">
		</div>
	</td>
	    <td  class="coloreTdDrop" align="center">
		<div id="drop_file_zone" ondrop="upload_file(event)" style=" width: 100%; border: 1px dashed black;" ondragover="return false">	
			<div id="drag_upload_file" >
				<p>CARICA FILE<p/>
				<input type="file" id="selectfile">
			</div>
		<input type="button" value="Seleziona File" id="rischioFulminazione" class="btn btn-success" onclick="file_explorer();">
		</div>
	</td>
	   <td  class="coloreTdDrop" align="center">
		<div id="drop_file_zone" ondrop="upload_file(event)" style=" width: 100%; border: 1px dashed black;" ondragover="return false">	
			<div id="drag_upload_file" >
				<p>CARICA FILE<p/>
				<input type="file" id="selectfile">
			</div>
		<input type="button" value="Seleziona File"  id="denunciaMessaInServizioInail" class="btn btn-success" onclick="file_explorer();">
		</div>
	</td>
	    <td  class="coloreTdDrop" align="center">
		<div id="drop_file_zone" ondrop="upload_file(event)" style=" width: 100%; border: 1px dashed black;" ondragover="return false">	
			<div id="drag_upload_file" >
				<p>CARICA FILE<p/>
				<input type="file" id="selectfile">
			</div>
		<input type="button" value="Seleziona File" id="verificaPeriodicaInail" class="btn btn-success" onclick="file_explorer();">
		</div>
	</td>
	    <td  class="coloreTdDrop" align="center">
		<div id="drop_file_zone" ondrop="upload_file(event)" style=" width: 100%; border: 1px dashed black;" ondragover="return false">	
			<div id="drag_upload_file" >
				<p>CARICA FILE<p/>
				<input type="file" id="selectfile">
			</div>
		<input type="button" value="Seleziona File" id="ultimaVerificaPeriodicaASL"  class="btn btn-success" onclick="file_explorer();">
		</div>
	</td>
	   <td><b>Scadenza:<b><br/><input type="date" name="scadenzaUltimaVerificaMezzoSubAffidataria" id="scadenzaUltimaVerificaMezzoSubAffidataria" width="75px" class="form-control chkEdit larghezzaBase" enable></td>
	   <td  class="coloreTdDrop" align="center">
		<div id="drop_file_zone" ondrop="upload_file(event)" style=" width: 100%; border: 1px dashed black;" ondragover="return false">	
			<div id="drag_upload_file" >
				<p>CARICA FILE<p/>
				<input type="file" id="selectfile">
			</div>
		<input type="button" value="Seleziona File" id="verificaTrimestraleFuni" class="btn btn-success" onclick="file_explorer();">
		</div>
	</td>
	    <td><b>Scadenza:<b><br/><input type="date" name="scadenzaUltimaVerificaFuniMezzoSubAffidataria" id="scadenzaUltimaVerificaFuniMezzoSubAffidataria" width="75px" class="form-control chkEdit larghezzaBase" enable></td>
	  <td><b>Note:<b><br/><input type="text" name="note" id="note" width="75px" class="form-control chkEdit larghezzaBase" enable></td>
	    	    <td style=" border-style: none;"> <input type="text" name="fkIdAffidataria" id="fkIdAffidataria" width="75px" class="form-control chkEdit larghezzaBase" value="<?php echo $fkIdAffidataria?>"></td>

                <td><input type="submit" name="submit" onclick="location.href='subAffidatario.php'" value="Salva MezzoDiTrasporto" class="btn btn-primary"/></td>
	    <td width="144" bgcolor="#6DFD1E">AUTORIZZATO    /<br>
	      NON AUTORIZZATO</td>
	    <td><input type="submit" name="submit" onclick="location.href='subAffidatario.php'" value="Scarica BADGE" class="btn btn-primary"/></td>
	     <td>
 		<select name="dataDiAutorizzazione" id="dataDiAutorizzazione" class="form-control chkEdit larghezzaBase" enable>
  			
			<option value="Mezzi d'opera"></option>
			
			
		 </select>
		</td>
</form>
      </tr>
      </table>

我想要发生的是，每当我更改组合框的值时，我放入脚本中的文本框都会被禁用。 例如，组（“1 - Mezzi d opera”）必须停用以下字段：

 document.getElementById('documentiRadioComando').disabled=true;
    document.getElementById('realizzazioneBasamento').disabled=true;
    document.getElementById('rischioFulminazione').disabled=true;
    document.getElementById('denunciaMessaInServizioInail').disabled=true;
    document.getElementById('verificaPeriodicaInail').disabled=true;
    document.getElementById('ultimaVerificaPeriodicaASL').disabled=true;
    document.getElementById('scadenzaUltimaVerificaMezzoSubAffidataria').disabled=true;
    document.getElementById('verificaTrimestraleFuni').disabled=true;
    document.getElementById('scadenzaUltimaVerificaFuniMezzoSubAffidataria').disabled=true;

但其他一切都必须处于活动状态

【问题讨论】：

    标签： javascript html combobox getelementbyid disabled-input


    【解决方案1】：

    除了else相关的问题外，你还有一个问题，就是每次更改都必须激活和停用所有字段..否则它们保持之前选择的状态

    if(comp.value=='1 - Mezzi d opera') {
  document.getElementById('sottoTipologiaMezzoSubAffidataria').disabled=false;
  document.getElementById('marcaMezzoSubAffidataria').disabled=false;
  document.getElementById('modelloMezzoSubAffidataria').disabled=false;
  document.getElementById('matricolaMezzoSubAffidataria').disabled=false;
  document.getElementById('annoCostruzioneMezzoSubAffidataria').disabled=false;
  document.getElementById('certificatoConformitàCE').disabled=false;
  document.getElementById('librettoDiUsoEManutenzione').disabled=false;
  document.getElementById('librettoDiCircolazione').disabled=false;
  document.getElementById('registroPeriodicheInterne').disabled=false;
  document.getElementById('documentiRadioComando').disabled=true;
  document.getElementById('realizzazioneBasamento').disabled=true;
  document.getElementById('correttaEsecuzioneBasamento').disabled=true;
  document.getElementById('rischioFulminazione').disabled=true;
  document.getElementById('denunciaMessaInServizioInail').disabled=true;
  document.getElementById('verificaPeriodicaInail').disabled=true;
  document.getElementById('ultimaVerificaPeriodicaASL').disabled=true;
  document.getElementById('scadenzaUltimaVerificaMezzoSubAffidataria').disabled=true;
  document.getElementById('verificaTrimestraleFuni').disabled=true;
  document.getElementById('scadenzaUltimaVerificaFuniMezzoSubAffidataria').disabled=true;
} else if(comp.value=='2 - Automezzi') {
   document.getElementById('sottoTipologiaMezzoSubAffidataria').disabled=false;
  document.getElementById('marcaMezzoSubAffidataria').disabled=false;
  document.getElementById('modelloMezzoSubAffidataria').disabled=false;
  document.getElementById('matricolaMezzoSubAffidataria').disabled=false;
  document.getElementById('annoCostruzioneMezzoSubAffidataria').disabled=false;
  document.getElementById('certificatoConformitàCE').disabled=true;
  document.getElementById('librettoDiUsoEManutenzione').disabled=false;
  document.getElementById('librettoDiCircolazione').disabled=false;
  document.getElementById('registroPeriodicheInterne').disabled=true;
  document.getElementById('documentiRadioComando').disabled=true;
  document.getElementById('realizzazioneBasamento').disabled=true;
  document.getElementById('correttaEsecuzioneBasamento').disabled=true;
  document.getElementById('rischioFulminazione').disabled=true;
  document.getElementById('denunciaMessaInServizioInail').disabled=true;
  document.getElementById('verificaPeriodicaInail').disabled=true;
  document.getElementById('ultimaVerificaPeriodicaASL').disabled=true;
  document.getElementById('scadenzaUltimaVerificaMezzoSubAffidataria').disabled=true;
  document.getElementById('verificaTrimestraleFuni').disabled=true;
  document.getElementById('scadenzaUltimaVerificaFuniMezzoSubAffidataria').disabled=true;
} else if(comp.value=='3 - Mezzi di sollevamento (All. VII del D-Lgs. 81/08)') {
  document.getElementById('sottoTipologiaMezzoSubAffidataria').disabled=false;
  document.getElementById('marcaMezzoSubAffidataria').disabled=false;
  document.getElementById('modelloMezzoSubAffidataria').disabled=false;
  document.getElementById('matricolaMezzoSubAffidataria').disabled=false;
  document.getElementById('annoCostruzioneMezzoSubAffidataria').disabled=false;
  document.getElementById('certificatoConformitàCE').disabled=false;
  document.getElementById('librettoDiUsoEManutenzione').disabled=false;
  document.getElementById('librettoDiCircolazione').disabled=false;
  document.getElementById('registroPeriodicheInterne').disabled=false;
  document.getElementById('documentiRadioComando').disabled=false;
  document.getElementById('realizzazioneBasamento').disabled=false;
  document.getElementById('correttaEsecuzioneBasamento').disabled=false;
  document.getElementById('rischioFulminazione').disabled=false;
  document.getElementById('denunciaMessaInServizioInail').disabled=false;
  document.getElementById('verificaPeriodicaInail').disabled=false;
  document.getElementById('ultimaVerificaPeriodicaASL').disabled=false;
  document.getElementById('scadenzaUltimaVerificaMezzoSubAffidataria').disabled=false;
  document.getElementById('verificaTrimestraleFuni').disabled=false;
  document.getElementById('scadenzaUltimaVerificaFuniMezzoSubAffidataria').disabled=false;
} else if (comp.value=='4 - Attrezzature'){
  document.getElementById('sottoTipologiaMezzoSubAffidataria').disabled=false;
  document.getElementById('marcaMezzoSubAffidataria').disabled=false;
  document.getElementById('modelloMezzoSubAffidataria').disabled=false;
  document.getElementById('matricolaMezzoSubAffidataria').disabled=false;
  document.getElementById('annoCostruzioneMezzoSubAffidataria').disabled=true;
  document.getElementById('certificatoConformitàCE').disabled=true;
  document.getElementById('librettoDiUsoEManutenzione').disabled=true;
  document.getElementById('librettoDiCircolazione').disabled=true;
  document.getElementById('registroPeriodicheInterne').disabled=true;
  document.getElementById('documentiRadioComando').disabled=true;
  document.getElementById('realizzazioneBasamento').disabled=true;
  document.getElementById('correttaEsecuzioneBasamento').disabled=true;
  document.getElementById('rischioFulminazione').disabled=true;
  document.getElementById('denunciaMessaInServizioInail').disabled=true;
  document.getElementById('verificaPeriodicaInail').disabled=true;
  document.getElementById('ultimaVerificaPeriodicaASL').disabled=true;
  document.getElementById('scadenzaUltimaVerificaMezzoSubAffidataria').disabled=true;
  document.getElementById('verificaTrimestraleFuni').disabled=true;
  document.getElementById('scadenzaUltimaVerificaFuniMezzoSubAffidataria').disabled=true;
}}

    【讨论】：

      【解决方案2】：

      首先，你的 HTML 非常混乱，比如缺少关闭标签，甚至使用
      来代替。 “table”元素上的许多属性已经过时......

      您可以使用此工具来捕获语法错误： https://www.freeformatter.com/html-validator.html

      之后，您必须更改您的 javascript 结构，如上所述。

      function changeTextBox() {
comp = document.getElementById('tipologiaMezzoSubAffidataria');

if(comp.value=='1 - Mezzi d opera') {
  document.getElementById('documentiRadioComando').disabled=true;
  document.getElementById('realizzazioneBasamento').disabled=true;
  document.getElementById('rischioFulminazione').disabled=true;
  document.getElementById('denunciaMessaInServizioInail').disabled=true;
  document.getElementById('verificaPeriodicaInail').disabled=true;
  document.getElementById('ultimaVerificaPeriodicaASL').disabled=true;
  document.getElementById('scadenzaUltimaVerificaMezzoSubAffidataria').disabled=true;
  document.getElementById('verificaTrimestraleFuni').disabled=true;
  document.getElementById('scadenzaUltimaVerificaFuniMezzoSubAffidataria').disabled=true;
} else if(comp.value=='2 - Automezzi') {
  document.getElementById('certificatoConformitàCE').disabled=true;
  document.getElementById('registroPeriodicheInterne').disabled=true;
  document.getElementById('documentiRadioComando').disabled=true;
  document.getElementById('realizzazioneBasamento').disabled=true;
  document.getElementById('correttaEsecuzioneBasamento').disabled=true;
  document.getElementById('rischioFulminazione').disabled=true;
  document.getElementById('denunciaMessaInServizioInail').disabled=true;
  document.getElementById('verificaPeriodicaInail').disabled=true;
  document.getElementById('ultimaVerificaPeriodicaASL').disabled=true;
  document.getElementById('scadenzaUltimaVerificaMezzoSubAffidataria').disabled=true;
  document.getElementById('verificaTrimestraleFuni').disabled=true;
  document.getElementById('scadenzaUltimaVerificaFuniMezzoSubAffidataria').disabled=true;
} else if (comp.value=='4 - Attrezzature'){
  document.getElementById('annoCostruzioneMezzoSubAffidataria').disabled=true;
  document.getElementById('certificatoConformitàCE').disabled=true;
  document.getElementById('librettoDiUsoEManutenzione').disabled=true;
  document.getElementById('librettoDiCircolazione').disabled=true;
  document.getElementById('registroPeriodicheInterne').disabled=true;
  document.getElementById('documentiRadioComando').disabled=true;
  document.getElementById('realizzazioneBasamento').disabled=true;
  document.getElementById('correttaEsecuzioneBasamento').disabled=true;
  document.getElementById('rischioFulminazione').disabled=true;
  document.getElementById('denunciaMessaInServizioInail').disabled=true;
  document.getElementById('verificaPeriodicaInail').disabled=true;
  document.getElementById('ultimaVerificaPeriodicaASL').disabled=true;
  document.getElementById('scadenzaUltimaVerificaMezzoSubAffidataria').disabled=true;
  document.getElementById('verificaTrimestraleFuni').disabled=true;
  document.getElementById('scadenzaUltimaVerificaFuniMezzoSubAffidataria').disabled=true;
}}

      【讨论】：

      • 我会给你验证器的链接..我会更频繁地使用它
      • 您还必须在“更改”事件上调用该函数，因此每次更改值时它都会运行。
      【解决方案3】：

      你有一个奇怪的“其他”定义。为什么在“else”后面加分号？

      否则;

      也许这是你问题的根源？

      https://www.w3schools.com/js/js_if_else.asp

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2013-12-24
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-12-27
        • 2010-11-29
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode