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

btxsgosb  于 2023-01-29  发布在  Java
关注(0)|答案(5)|浏览(187)

我正在做一个项目,其中一个按钮需要被禁用,直到一个超链接被点击,一个复选框被选中。我现在已经使用jQuery关闭了复选框部分:

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

但我也需要设置它,使类的tc-disable仍然在按钮上,直到一个锚标记被点击,以及.我从来没有真正做到这一点之前,一个链接需要被点击之前删除一个类,找不到我正在寻找的,因为我在谷歌上寻找答案.

qf9go6mv

qf9go6mv1#

希望下面的代码能有所帮助。我还添加了控制台输出,这样你就可以跟踪值。另一个选择是使用link元素上的自定义属性而不是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" />
jhiyze9q

jhiyze9q2#

如果单击超链接时页面正在刷新或将您带到其他页面,则您需要查看sessionStorage。单击超链接时,您需要设置sessionStorage变量;加载页面时,您需要检查该变量是否已填充。如果变量已填充,请启用该按钮。
设置变量。

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

获取变量

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

如果需要重新禁用该按钮,可以清除会话存储并重新应用禁用的类。

sessionStorage.clear();

您可以了解有关会话存储here的更多信息。
如果页面没有刷新,你可以在点击链接时设置一个属性。

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

这些只是我能想到的一些解决方案。希望这对我有帮助。

b5lpy0ml

b5lpy0ml3#

也许这对你更好。首先你在anchor元素上做一个.on('click'事件监听器,然后,如果选中checkbox,则enablebutton。我将else语句添加到disable按钮,如果用户单击link,则checkbox未设置为示例。在此示例中,您不需要"我不需要上课。
但是,如果需要保留这些类,则可以将$('#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"/>
laximzn5

laximzn54#

这里有一个更简单的解决方案,如果他们取消勾选"我接受"复选框,它会处理按钮的状态。这很容易实现。我只是用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>
oyxsuwqo

oyxsuwqo5#

使用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>

根据需要将类型“submit”更改为“button”或“checkbox”。

相关问题