如何在单击超链接之前禁用按钮

Question

我正在处理一个需要禁用按钮的项目，直到单击超链接并选中复选框。 我目前使用 jQuery 关闭了复选框部分：

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

但我还需要设置它，以便 tc-disable 的 class 仍然在按钮上，直到也单击锚标记。 在删除 class 之前需要单击链接并且在谷歌搜索答案时找不到我正在寻找的东西之前，我从来没有真正这样做过。

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();

您可以在此处了解有关会话存储的更多信息。

如果页面没有刷新，您可以在单击链接时在链接上设置一个属性。

$('#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

也许这对您来说更好。 首先，您在anchor元素上创建一个.on('click'事件侦听器，然后，如果checkbox了checkbox则enable该button 。我添加了else语句，如果用户单击该link并且未设置checkbox则disable该按钮一个例子，在这个例子中，您不需要类。

但是如果您需要保留这些类，则可以替换$('#tc-btn').prop('disabled', false); 与$('#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

这里是一个更简单的解决方案，如果他们取消选中“我接受”复选框，则它将处理按钮的状态。 这很容易实现。 我只是使用Bootstrap来完善示例。

 //Handles the anchor click $("#anchor").click(() => { $("#anchor").addClass("visited"); $("#acceptBtn").prop("disabled", buttonState()); }); //Handles the checkbox check $("#checkBx").on("change", () => { $("#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> 

Answer 5

使用 Javascript 的单行解决方案可能是：

<input type="submit" id="test" name="test" required disabled="disabled">
<label for="test">I clicked the <a target="_blank" href="https://stackoverflow.com" onclick="document.getElementById('test').disabled=false">link</a>.</label>

根据您的需要将类型“提交”更改为“按钮”或“复选框”。