javascript - 如果用户从浏览器返回时具有值，如何启用默认禁用的输入

问题描述

我正在开发一个用于在活动中购买门票的 laravel 应用程序。我默认禁用了 2 个输入框，默认情况下也禁用了 2 个复选框。您首先需要选中至少一个允许输入框输入的复选框，然后您可以通过按下按钮并发出发布请求来继续下一步。问题是：

如果有人决定从浏览器按下后退按钮（在提交 post 请求之后），复选框仍处于选中状态，但输入框仍处于禁用状态，这意味着它的值将为 null（它存储之前的输入）。

这是页面刷新时的表单

这是提交前的表格

这是提交后没有再次刷新就返回的表单

如果用户在最终屏幕截图中提交表单，他将收到错误消息，因为在禁用框中输入但已选中该框。当我尝试读取输入因为它被检查时，我会得到空值。

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <div class="input-group-text">
            <input type="checkbox" name="2_box" id="2_box">
        </div>
        <div class="input-group-text">
            Jeton 2 &euro;
        </div>
        {{--<div class="input-group-text">--}}
            {{--Total: <span id="total_2" class="sum"></span>--}}
        {{--</div>--}}
    </div>
    <input type="text" class="form-control" placeholder="Cantitate" name="2_amount" id="2_amount" disabled>
    <div class="input-group-append">
        <div class="input-group-text">
            Total:  <span id="total_2" class="sum"></span>
        </div>
    </div>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox" name="10_box" id="10_box">
            </div>
            <div class="input-group-text">
                Jeton 10&euro;
            </div>
        </div>
        <input type="text" class="form-control" placeholder="Cantitate" name="10_amount" id="10_amount" disabled>
        <div class="input-group-append">
            <div class="input-group-text">
                Total:  <span id="total_10" class="sum"></span>
            </div>
        </div>
     </div>
  </div>
<script>
document.getElementById('2_box').onchange = function() {
    document.getElementById('2_amount').disabled = !this.checked;
};
document.getElementById('10_box').onchange = function() {
    document.getElementById('10_amount').disabled = !this.checked;
};
jQuery(document).ready(function(){
    jQuery('#2_amount').change(function(){
        var total = 0;
        jQuery('#2_amount').each(function(){
            if(jQuery(this).val() != ''){
                total = parseInt(jQuery(this).val()) * 2;
            }
        });
        jQuery('#total_2').html(total);
    });
});
jQuery(document).ready(function(){
    jQuery('#10_amount').change(function(){
        var total = 0;
        jQuery('#10_amount').each(function(){
            if(jQuery(this).val() != ''){
                total = parseInt(jQuery(this).val()) * 10;
            }
        });
        jQuery('#total_10').html(total);
    });
});

标签： javascriptphpjqueryhtmllaravel

javascript - 如果用户从浏览器返回时具有值，如何启用默认禁用的输入

问题描述

解决方案

推荐阅读