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

Question

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

如果某人决定从浏览器中按下“后退”按钮（在提交发布请求之后），该复选框将保持选中状态，但输入框将保持禁用状态，这意味着该输入框的值为空（它存储之前的输入）。

这是页面刷新形式

这是提交之前的表格

这是提交并返回而不重新刷新的表单

如果用户在最终的屏幕截图中提交了表单，则将收到一个错误消息，因为在一个禁用的框中有输入但选中了该框。当由于选中输入而试图读取输入时，我将得到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);
    });
});

Answer 1

您可以使用Laravel Old Input。它是专门为保存请求之间的信息而创建的。因此，例如，如果表单失败。

不过，考虑到您的情况，您基本上只需要阅读old即可触发该复选框并启用/禁用该复选框的输入。