How to Make a button disabled until a hyperlink is clicked

Question

I'm working on a project where a button needs to be disabled until a hyperlink is clicked and a checkbox is checked. I currently have the checkbox part down using jQuery:

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

But I also need to set it up so the class of tc-disable is still on the button until an anchor tag is clicked as well. I've never really done this before where a link needs to be clicked before removing a class and couldn't find what I was looking for as I was Googling for an answer.

Answer 1

A one-liner solution using Javascript could be:

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

Change the type "submit" to "button" or "checkbox" accordingly to your needs.

Answer 2

Here a much more simple solution and it handles the state of the button if they uncheck the "I Accept" checkbox. It is pretty easy to implement. I just used Bootstrap to pretty up the example.

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

Hope the code below helps. I also added console out put so you can track the value. Another option is use custom attribute on link element instead of javascript variable to track if the link is clicked.

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 4

Maybe this is better for you. First you make an .on('click' event listener on the anchor element, then, if the checkbox is checked enable the button. I added the else statement to disable the button if a user clicks the link and the checkbox is not set for an example. In this example you don't need the classes.

But if you needed to keep the the classes then you would replace the $('#tc-btn').prop('disabled', false); with $('#tc-btn').addClass() or .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 5

If the page is refreshing or taking you to a different page when you click the hyperlink, you will want to look into sessionStorage. When the hyperlink is clicked you will want to set a sessionStorage variable and when the page loads you want to check that variable to see if it is populated. If the variable is populated, enable the button.

Set the variable.

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

Get the variable

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

If you need to re-disable the button you can clear the session storage and reapply the disabled class.

sessionStorage.clear();

You can learn more about session storage here.

If the page does not refresh you could just set an attr on the link when it is clicked like so.

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

Then when the checkbox is checked you can check this in your function.

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

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

These are just some solutions I could think of off the top of my head. Hope this helps.