ユーザー確認を処理するときにチェックボックスとテキストボックスの一貫性を維持するにはどうすればよいですか?

jQuery チェックボックスの変更とクリックの調整

チェックボックスの状態がイベントを通じて動的に更新されるシナリオでは、チェックボックスの状態がイベントを通じて動的に更新されるシナリオでは、チェックボックスのチェック状態とリンクされたテキストボックスの値。これは、チェックボックスをクリックして状態を切り替える場合に特に重要になります。

次の jQuery コードを考えてみましょう:

$(document).ready(function() {
  //set initial state.
  $('#textbox1').val($(this).is(':checked'));

  $('#checkbox1').change(function() {
    $('#textbox1').val($(this).is(':checked'));
  });

  $('#checkbox1').click(function() {
    if (!$(this).is(':checked')) {
      return confirm("Are you sure?");
    }
  });
});

ここで、.change() イベントは、チェックボックスのチェック状態を確認し、.click() イベントによってチェックボックスのチェックを外すかどうかの確認を求められます。ただし、このアプローチでは矛盾が生じます。確認プロンプト中にユーザーがキャンセル (「いいえ」を選択) した場合、チェックボックスはオフのままになります。ただし、change() イベントは確認の前にトリガーされるため、テキストボックスの値は false に更新され、チェックボックスはまだチェックされているものの、チェックされていない状態を示します。

この問題を解決するには、スクリプトを次のように変更する必要があります。キャンセルを正しく処理してください。 1 つのアプローチは次のとおりです。

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val(this.checked);

    $('#checkbox1').change(function() {
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            $(this).prop("checked", returnVal);
        }
        $('#textbox1').val(this.checked);        
    });
});

この更新バージョンでは、チェックボックスをチェックする必要があるかどうかを確認する条件付きチェックが導入されています。確認がキャンセルされた場合、prop() メソッドを使用してチェックボックスのチェック状態が復元されます。その後、テキストボックスの値がチェックボックスの実際の状態に基づいて更新され、チェックボックスのチェックされた状態とリンクされたテキストボックスの値の間の一貫性が確保されます。

以上がユーザー確認を処理するときにチェックボックスとテキストボックスの一貫性を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。