ハイパーリンクがクリックされるまでボタンを無効にする方法

Question

ハイパーリンクがクリックされ、チェックボックスがオンになるまでボタンを無効にする必要があるプロジェクトで作業しています。アンカータグが同様にクリックされるまで、そのTC-無効のクラスは、ボタンの上にまだある

$('#tc-checkbox').change(function(){ 
if($(this).is(":checked")) { 
     $('#tc-btn').removeClass('tc-disable'); 
} else { 
     $('#tc-btn').addClass('tc-disable'); 
} 
}); 

をしかし、私はまた、それを設定する必要があります。私は現在、jQueryのを使用して、チェックボックスの部分を下に持っています。私はクラスを削除する前にリンクをクリックする必要があり、答えを求めるグーグルで私が探していたものを見つけることができなかった前にこれを実際に行ったことはありません。

Answer 1

下記のコードを参考にしてください。私はまたあなたが値を追跡することができるようにコンソールアウトを追加しました。別のオプションは、javascript変数の代わりにリンク要素のカスタム属性を使用して、リンクがクリックされたかどうかを追跡することです。

var enableLinkClicked = false; 
 

 
$('#tc-link').click(function() { 
 
    enableLinkClicked = true; 
 

 
    console.log("link clicked\ncheckbox value: " + $($('#tc-checkbox')).is(":checked")); 
 
    console.log("link clicked: " + enableLinkClicked); 
 

 
    if ($('#tc-checkbox').is(":checked")) { 
 
    $('#tc-btn').removeClass('tc-disable'); 
 
    } 
 
}); 
 

 
$('#tc-checkbox').change(function() { 
 
    console.log("checkbox clicked\ncheckbox value: " + $(this).is(":checked")); 
 
    console.log("link clicked: " + enableLinkClicked); 
 

 

 
    if ($(this).is(":checked") && enableLinkClicked) { 
 
    $('#tc-btn').removeClass('tc-disable'); 
 
    } else { 
 
    $('#tc-btn').addClass('tc-disable'); 
 
    } 
 
});

#tc-btn.tc-disable { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 
<button id="tc-btn">My Button</button> 
 
<br/> 
 
<a id="tc-link" href="javascript:void(0);">Link to enable button</a> 
 
<br/> 
 
<input type="checkbox" id="tc-checkbox" />

Answer 2

ハイパーリンクをクリックすると、ページが更新または別のページにあなたを取っている場合は、sessionStorageに見えることになるでしょう。ハイパーリンクをクリックすると、sessionStorage変数を設定し、ページが読み込まれたときにその変数をチェックして、その変数が設定されているかどうかを確認します。変数に値が設定されている場合は、ボタンを有効にします。

変数を設定します。

sessionStorage.setItem('key', 'value'); 

あなたはセッションストレージをクリアすることができ、ボタンを再度無効にし、無効なクラスを再適用する必要がある場合は、変数

var data = sessionStorage.getItem('key'); 

取得します。

sessionStorage.clear(); 

セッション記憶域の詳細については、hereを参照してください。

ページが更新されない場合は、クリックしたときにリンク上にattrを設定するだけで済みます。

$('#tc-link').on('click', function() { 
    $(this).attr('clicked', 'true'); 
}); 

チェックボックスがオンになっている場合、この機能で確認できます。

$('#tc-checkbox').change(function(){ 
    if($(this).is(":checked") && $('#tc-link').hasAttr('clicked')) { 
     $('#tc-btn').removeClass('tc-disable'); 

    } else { 
     $('#tc-btn').addClass('tc-disable'); 
    } 
}); 

これは私が頭の上から考えることができるちょっとしたソリューションです。お役に立てれば。

Answer 3

おそらく、これはあなたにとって良いでしょう。最初に、要素に.on('click'イベントリスナーを作成し、checkboxがenableの場合はbuttonをチェックします。ユーザーがlinkをクリックし、checkboxが例として設定されていない場合は、elseステートメントをdisableボタンに追加しました。この例では、クラスは必要ありません。

しかし、あなたはクラスを維持するために必要であれば、あなたはここで$('#tc-btn').addClass()または.removeClass()

$('#theLink').on('click', function(e) 
 
{ 
 
    e.preventDefault(); 
 
    if($('#tc-checkbox').is(':checked')) 
 
    { 
 
    $('#tc-btn').prop('disabled', false); 
 
    $('#tc-btn').val('Currently enabled'); 
 
    } 
 
    else 
 
    { 
 
    $('#tc-btn').val('Currently disabled'); 
 
    $('#tc-btn').prop('disabled', true); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="tc-checkbox" /> 
 

 
<a href="javascript:void();" id="theLink">This link will enable the button</a> 
 

 
<input type="button" id="tc-btn" value="Currently disabled" disabled="disabled"/>

Answer 4

とはるかに簡単な解決策を$('#tc-btn').prop('disabled', false);に取って代わるだろうと、それはボタンの状態を処理します「同意する」チェックボックスをオフにした場合実装するのはかなり簡単です。私は例をかなり上げるためにブートストラップを使用しました。

//Handles the anchor click 
 
$("#anchor").click(() => { 
 
\t $("#anchor").addClass("visited"); 
 
\t $("#acceptBtn").prop("disabled", buttonState()); 
 
}); 
 
//Handles the checkbox check 
 
$("#checkBx").on("change",() => { 
 
\t $("#acceptBtn").prop("disabled", buttonState()); 
 
}); 
 

 
//Function that checks the state and decides if the button should be enabled. 
 
buttonState =() => { 
 
    let anchorClicked = $("#anchor").hasClass("visited"); 
 
    let checkboxChecked = $("#checkBx").prop("checked") === true; 
 
    return !(anchorClicked && checkboxChecked); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 
     <a href="https://www.google.com" target="_blank" id="anchor">View Terms</a> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <label class="form-check-label"> 
 
    <input class="form-check-input" id="checkBx" type="checkbox" value=""> 
 
    I accept the terms 
 
    </label> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <button id="acceptBtn" class="btn btn-success" disabled="disabled"> 
 
    Ok 
 
    </button> 
 
    </div> 
 
</div> 
 
</div>