Enable/Disable 根据 comboBox 值的 txtBox

Question

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

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;

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

Answer 1

您的 "else" 定义很奇怪。为什么在 "else" 后面加分号？

else;

也许这是您问题的根源？

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

Answer 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;
}}

Answer 3

除了与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;
}}

Enable/Disable 根据 comboBox 值的 txtBox

Enable/Disable a txtBox according to comboBox value

html

javascript

combobox

getelementbyid

disabled-input