根据comboBox值启用/禁用txtBox

时间:2018-12-05 16:59:33

标签: javascript html combobox getelementbyid disabled-input

我问你以下问题,我必须确保基于comboBox值的选择,禁用了一些textBox /某些按钮..在论坛上寻找,我发现了此解决方案,但它不起作用...

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>

我想发生的是,每当我更改comboBox的值时,我放在脚本中的文本框就会被禁用。 例如,组(“ 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;

但是其他所有内容都必须处于活动状态

3 个答案:

答案 0 :(得分:1)

首先,您的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;
}}

答案 1 :(得分: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 :(得分:0)

您有一个奇怪的“其他”定义。为什么在“其他”之后加上分号?

  

其他;

也许是您问题的根源?

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