禁用输入字段

时间:2016-08-30 03:34:10

标签: html

如果其他输入类型的值与日期数据类型相同,我想禁用2次输入类型。

<tr>
           <td>Date From</td>
           <td><input type="date" name="DateFrom" style="width: 235px" required></td>
           //Example: the inputted value is 08/23/2016
</tr>
<tr>
           <td>Date To</td>
           <td><input type="date" name="DateTo" style="width: 235px" required></td>
           //Example: the user will also input 08/23/2016
</tr>
<tr>
           <td>Time From</td>
           <td><input type="time" name="TimeFrom" style="width: 235px" ></td>
           //This input field will be disabled
</tr>
<tr>
           <td>Time To</td>
           <td><input type="time" name="TimeTo" style="width: 235px" ></td>
           //This input field will be disabled
</tr>

2 个答案:

答案 0 :(得分:0)

我认为我不完全明白你想做什么,但我认为这与你想要的相似:

<script>
    var dateFrom = document.getElementsByName('DateFrom')[0]; /* get the DateFrom element */

    var dateTo = document.getElementsByName('DateTo')[0]; /* get the DateTo element*/

    /* check if their the same date */
    if(dateFrom.value == dateTo.value){
        /* disable the time selectors */
        document.getElementsByName('TimeFrom')[0].disabled = true;
        document.getElementsByName('TimeTo')[0].disabled = true;
    }
</script>

答案 1 :(得分:0)

尝试使用jQuery函数,它会比较两个日期字段的值,只要它们发生变化,如果两个字段都有相同的值,它将禁用时间字段,否则启用它们

function compare() {
    var FromDate = $("[name='DateFrom']").val()
    var ToDate = $("[name='DateTo']").val()
    if (FromDate === ToDate) {
        $("[name='TimeTo']").prop('disabled', true)
        $("[name='TimeFrom']").prop('disabled', true)
    } else {
        $("[name='TimeTo']").prop('disabled', false)
        $("[name='TimeFrom']").prop('disabled', false)
    }
}
$("[name='DateFrom']").on("change", function() {
    change();
});
$("[name='DateTo']").on("change", function() {
    compare();
});

查看链接http://jsbin.com/zitezol/1/edit?html,js,output