在次要的情况下启用表单字段

Question

form field screenshot

我正在收集用户提名的数据，以便在我的组织中提名。表单字段已附加为图像供您参考。

我使用iondatepicker作为日期字段。如果用户为被提名者选择的出生日期确定为未成年人的年龄，我希望启用未成年人监护人数据的字段。否则他们应该保持禁用状态或值为“NA”。请在下面找到表单字段的代码。

<table>
    <tr>
        <td>
            <div id="result-1">
                <input style="width: 600px;" type="text" value="" name="dob" id="mydate" 
                    data-lang="en" data-years="1925-2018" size="10" maxlength="10" 
                    placeholder='date of birth of nominee (dd/mm/yyyy)' data-format="DD/MM/YYYY" 
                    class="form-control"/>
            </div>
        </td>
    </tr>
    <tr>
        <td style="text-align: left;">
            <b>If Nominee is a Minor, give 
            GUARDIAN's Particulars</b>
        </td>
    </tr>
    <tr>
        <td>
            <input style="width: 600px;" 
                type="text" name="g_name" id="g_name"  size="30" maxlength="200" 
                placeholder='Guardian Name' class="form-control"/>
        </td>
    </tr>
    <tr>
        <td>
            <input style="width: 600px;" 
                type="text" name="g_relation" id="g_relation"  size="30" maxlength="200" 
                placeholder='Guardian Relationship with you' class="form-control"/>
        </td>
    </tr>
    <tr>
        <td>
            <input style="width: 600px;" 
                type="text" name="g_address" id="g_address"  size="30" maxlength="200" 
                placeholder='Guardian Address' class="form-control"/>
        </td>
    </tr>
</table>

Answer 1

您可以尝试以下解决方案（假设您没有使用任何库，如jQuery或moment.js，它是在普通的javascript中）：

var myDate = document.getElementById('mydate')

myDate.addEventListener('change', function(e){
  var val = e.target.value
  var date = new Date(val)
   
  if ( isNaN( date.getDate())  ){
    alert('Wrong date format!')
    return;
  }
  
  var compareDate = new Date()
  compareDate.setFullYear(compareDate.getFullYear()-18)
  
  
  if(compareDate < date){
     document.getElementById('g_name').value=""
     document.getElementById('g_relation').value=""
     document.getElementById('g_address').value=""
     document.getElementById('g_name').disabled=false
     document.getElementById('g_relation').disabled=false
     document.getElementById('g_address').disabled=false
  }else{
     document.getElementById('g_name').value="NA"
     document.getElementById('g_relation').value="NA"
     document.getElementById('g_address').value="NA"
     document.getElementById('g_name').disabled=true
     document.getElementById('g_relation').disabled=true
     document.getElementById('g_address').disabled=true
  }
})

<table>
    <tr>
        <td>
            <div id="result-1">
                <input style="width: 600px;" type="text" value="" name="dob" id="mydate" 
                    data-lang="en" data-years="1925-2018" size="10" maxlength="10" 
                    placeholder='date of birth of nominee (dd/mm/yyyy)' data-format="DD/MM/YYYY" 
                    class="form-control"/>
            </div>
        </td>
    </tr>
    <tr>
        <td style="text-align: left;">
            <b>If Nominee is a Minor, give 
            GUARDIAN's Particulars</b>
        </td>
    </tr>
    <tr>
        <td>
            <input style="width: 600px;" 
                type="text" name="g_name" id="g_name"  size="30" maxlength="200" disabled
                placeholder='Guardian Name' class="form-control"/>
        </td>
    </tr>
    <tr>
        <td>
            <input style="width: 600px;" 
                type="text" name="g_relation" id="g_relation"  size="30" maxlength="200" disabled  
                placeholder='Guardian Relationship with you' class="form-control"/>
        </td>
    </tr>
    <tr>
        <td>
            <input style="width: 600px;" 
                type="text" name="g_address" id="g_address"  size="30" maxlength="200" disabled 
                placeholder='Guardian Address' class="form-control"/>
        </td>
    </tr>
</table>