Input checkbox inside an anchor tag

Question

I have the following structure in my html code. Due to unavoidable circumstances I can't change the html structure. I want both Link and the checkbox to be worked independently. How this can be done via Javascript or Jquery ?

 <a href="#"> <span class="fa fa-chevron-right blue"></span> Early Math <label class="label-checkbox"> <input type="checkbox" data-field-type="checkbox"><i class="fa fa-2x icon-checkbox"></i> </label> </a>

Answer 1

I do not believe that a checkbox inside of an anchor can be made to work reliably. But even if you are unable to change the HTML directly, you can still manipulate it through Javascript/JQuery:

$(document).ready(() => {
    $('a input').insertAfter("a");
});

(This does assume only one <a> tag and one <input> tag).