ドロップダウンボックスの値でフィールドを有効にする

Question

ドロップダウンボックスを実行するには次のコードを使用し、値がドロップダウンで値と同じでない場合は無効にします。

私のコードは以下の通りです。

document.getElementById('type').addEventListener('change', function() { 
 
    if (this.value == Hijacking) { 
 
    document.getElementById('hijacking').disabled = false; 
 
    } else { 
 
    document.getElementById('hijacking').disabled = true; 
 
    } 
 
});

<div class="width-qrtr"> 
 
    <label>Type of event</label> 
 
    <select name="Type" id="select"> 
 
      <option value="">Select Type</option> 
 
      <option value="Fraud">Fraud</option> 
 
      <option value="Theft">Theft</option> 
 
      <option value="Accident">Accident</option> 
 
      <option value="Hijacking">Hijacking</option> 
 
    </select> 
 
</div> 
 
<div class="width-qrtr"> 
 
    <label>Police Station</label> 
 
    <input id="textbox" disabled="true" type="text" name="Test" /> 
 
</div>

それは無効になってフィールドを保持します。値を数値に変更すると機能しますが、SQLの値をデータベースに挿入する必要があります

Answer 1

document.getElementByIdid="..."で定義されている対応するIDを使用する場合にのみ機能します。また、文字列の値を比較するには、引用符=>this.value == 'Hijacking'に入れなければなりません。

修正されたコードは次のようになります。

document.getElementById('select').addEventListener('change', function() { 
 
    if (this.value == 'Hijacking') { 
 
    document.getElementById('textbox').disabled = false; 
 
    } else { 
 
    document.getElementById('textbox').disabled = true; 
 
    } 
 
});

<div class="width-qrtr"> 
 
    <label>Type of event</label> 
 
    <select name="Type" id="select"> 
 
      <option value="">Select Type</option> 
 
      <option value="Fraud">Fraud</option> 
 
      <option value="Theft">Theft</option> 
 
      <option value="Accident">Accident</option> 
 
      <option value="Hijacking">Hijacking</option> 
 
    </select> 
 
</div> 
 
<div class="width-qrtr"> 
 
    <label>Police Station</label> 
 
    <input id="textbox" disabled="true" type="text" name="Test" /> 
 
</div>

Answer 2

いくつかのバグをあなたのコードでは、固定次のように：

document.getElementById('select').addEventListener('change', function() { 
 
    if (this.value == "Hijacking") { 
 
    document.getElementById('textbox').disabled = false; 
 
    } else { 
 
    document.getElementById('textbox').disabled = true; 
 
    } 
 
});

<div class="width-qrtr"> 
 
    <label>Type of event</label> 
 
    <select name="Type" id="select"> 
 
      <option value="">Select Type</option> 
 
      <option value="Fraud">Fraud</option> 
 
      <option value="Theft">Theft</option> 
 
      <option value="Accident">Accident</option> 
 
      <option value="Hijacking">Hijacking</option> 
 
    </select> 
 
</div> 
 
<div class="width-qrtr"> 
 
    <label>Police Station</label> 
 
    <input id="textbox" disabled="true" type="text" name="Test" /> 
 
</div>