如果用戶從瀏覽器返回時具有輸入值，默認情況下如何啟用禁用的輸入

Question

我正在開發一個用於在活動中購買門票的laravel應用。 我默認情況下禁用了2個輸入框，默認情況下也禁用了2個復選框。 首先，您需要至少選中一個復選框，以使輸入框能夠鍵入，然后可以通過按下按鈕並進行發布請求來進行下一步。 問題是：

如果有人決定從瀏覽器中按下“后退”按鈕（在提交發布請求之后），該復選框將保持選中狀態，但輸入框將保持禁用狀態，這意味着其值將為null（它將存儲之前的輸入）。

這是頁面刷新的形式

這是提交之前的表格

這是提交后返回而不重新刷新的表單

如果用戶在最終的屏幕截圖中提交表單，則將收到錯誤消息，因為在禁用框中輸入了內容，但是選中了該框。 當由於選中輸入而試圖讀取輸入時，我將得到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的輸入即可觸發該復選框並啟用/禁用它。