Question

我正在开发一个项目，其中需要禁用按钮，直到单击超链接并选中复选框。我目前使用jQuery复选框部分：

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

但是我还需要设置它，以便tc-disable的类仍然在按钮上，直到点击一个锚标记。我之前从未真正做过这个，之后在删除课程之前需要点击一个链接而无法找到我正在寻找的内容，因为我正在谷歌搜索答案。

Answer 1

希望以下代码有所帮助。我还添加了控制台输出，以便您可以跟踪该值。另一个选项是在link元素上使用custom属性而不是javascript变量来跟踪链接是否被点击。

＆＃13;

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

＆＃13;

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

＆＃13;

<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" />

＆＃13;

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'元素上设置anchor事件监听器，然后，如果checkbox被enable button 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"/>

import android.util.Log;

import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.FirebaseUser;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.iid.FirebaseInstanceId;
import com.google.firebase.iid.FirebaseInstanceIdService;

public class MyFirebaseInstanceIDService extends FirebaseInstanceIdService {

private static final String TAG = "MT: FIIDService";

@Override
public void onTokenRefresh() {
    // Get updated InstanceID token.
    String refreshedToken = FirebaseInstanceId.getInstance().getToken();
    Log.d(TAG, "Refreshed token: " + refreshedToken);
    sendRegistrationToServer(refreshedToken);
}

private void sendRegistrationToServer(String token) {
    FirebaseAuth mAuth = FirebaseAuth.getInstance();
    FirebaseUser user = mAuth.getCurrentUser();
    if (user != null) {
        FirebaseDatabase database = FirebaseDatabase.getInstance();
        DatabaseReference IDTokensRef = database.getReference(getString(R.string.firebase_idtokens));
        IDTokensRef.child(user.getUid()).setValue(token);
        Log.d(TAG, "Refreshed token assigned to user: " + user.getDisplayName());
    }
}

<service
    android:name=".MyFirebaseInstanceIDService">
    <intent-filter>
        <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
    </intent-filter>
</service>

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>

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

4 个答案: