私の機能をモジュラー化する際にテキスト入力を無効にする方法

Question

ここにスクリプトがあります。私の目標はselectで選択されていれば他のテキスト入力が有効になります。任意のアプローチは本当に感謝される、私はこれのような4つの質問があり、私は再利用可能に私の機能を行うためのモジュラー、最高のアプローチをしたい..どのように正しく2つの名前の入力が生成されますPHPの2つのポスト変数.. T_T

<script type="text/javascript" charset="utf-8"> 
    function validate() 
    { 
    var ddl = document.getElementById("cause_pain"); 
    var selectedValue = ddl.options[ddl.selectedIndex].value; 
     if (selectedValue == "OTHER") 
     { 
     document.getElementsByClassName("causepain")[0].removeAttribute("name"); 
     document.getElementsByClassName("causepain1")[0].removeAttribute("disabled"); 
     } 
    } 
</script> 

<form action="test.php" method="GET"> 

             <select class="select causepain" id="cause_pain" name="cause_pain" onchange="validate()"> 
             <option value="" selected="selected">Select Cause of Pain</option> 
             <option value="ARTHRITIS">ARTHRITIS</option> 
             <option value="RHEUMATISM">RHEUMATISM</option> 
             <option value="OLD AGE">OLD AGE</option> 
             <option value="ACTIVE LIFESTYLE WHEN YOUNGER">ACTIVE LIFESTYLE WHEN YOUNGER</option>   
             <option value="OTHER">OTHER</option>                                                                 
             </select> 
             <input class="causepain1" type="text" id="cause_pain" name="cause_pain" size="40" onkeyup="clean('this.id')" disabled> 
<input type="submit" id="submit"/> 
</form> 

Answer 1

このメソッドは再利用可能で、かなり簡単です。データ属性を使用して、特定のオプション要素に表示する必要のある要素を指定できます。入力要素を表示する前に、前の選択に起因する要素を非表示にします。

例：

<form action="test.php" method="GET"> 
     <select class="select causepain" id="cause_pain" name="cause_pain"> 
      <option value="" selected="selected">Select Cause of Pain</option> 
      <option value="ARTHRITIS">ARTHRITIS</option> 
      <option value="RHEUMATISM">RHEUMATISM</option> 
      <option value="OLD AGE">OLD AGE</option> 
      <option value="ACTIVE LIFESTYLE WHEN YOUNGER">ACTIVE LIFESTYLE WHEN YOUNGER</option> 
      <option value="OTHER" data-show="cause_pain_other">OTHER</option> 
     </select> 
     <input class="causepain1" type="text" id="cause_pain_other" name="cause_pain" size="40" 
       onkeyup="clean('this.id')" disabled style="display: none;"> 
     <input type="submit" id="submit"/> 
    </form> 
    <script type="text/javascript" charset="utf-8"> 
     var selectedOpt; 
     function selectionChanged(e) { 
      if (selectedOpt && selectedOpt.dataset.show) { 
       var showEl = document.getElementById(selectedOpt.dataset.show); 
       showEl.disabled = true; 
       showEl.style.display = 'none'; 
      } 
      selectedOpt = this.querySelector('[value="'+e.target.value+'"]'); 
      if (selectedOpt.dataset.show) { 
       var showEl = document.getElementById(selectedOpt.dataset.show); 
       showEl.disabled = false; 
       showEl.style.display = 'block'; 
      } 
     } 
     document.querySelector('select').addEventListener('change', selectionChanged); 
    </script> 

あなたselectedOptは、あなたが同じページ上の複数の選択を使用している場合は対象となり、その後、ちょうどインデックスとしてidを持つオブジェクトに要素を追加する必要があります

var selectedOpt = {}; 
... 
selectedOpt[this.id] = this.querySelector('[value="'+e.target.value+'"]');