I am currently trying to synchronise two checkboxes on a page.
I need the checkboxes to be synchronised - to this end I'm using a Tampermonkey userscript to pick up when one of them is clicked. However, I'm at a loss as to how to do it.
I believe they are not actually checkboxes, but ExtJS buttons that resemble checkboxes. I can't check whether they're checked with JQuery because of this: the checked value is appended to a class once the JS behind the button has run.
I have tried preventDefault and stopPropagation, but either I'm using it wrong or not understanding its' usage.
I'm not quite clever enough to just call the JS behind the box instead of an onclick event, otherwise that would solve my issue.
This is my code:
//Variables - "inputEl" is the actual button.
var srcFFR = "checkbox-1097";
var destFFR = "checkbox-1134";
var srcFFRb = "checkbox-1097-inputEl";
var destFFRb = "checkbox-1134-inputEl";
//This checks if they're synchronised on page load and syncs them with no user intervention.
var srcChk = document.getElementById(srcFFR).classList.contains('x-form-cb-checked');
var destChk = document.getElementById(destFFR).classList.contains('x-form-cb-checked');
if (srcChk == true || destChk == false){
document.getElementById(destFFRb).click();}
else if (destChk == true || srcChk == false) {
document.getElementById(srcFFRb).click();}
//This is where it listens for the click and attempts to synchronise the buttons.
$(document.getElementById(srcFFRb)).on('click',function(e){
e.preventDefault();
if (document.getElementById(srcFFR).classList == document.getElementById(destFFR).classList) {
return false;}
else {
document.getElementById(destFFRb).click();}});
$(document.getElementById(destFFRb)).on('click',function(e){
e.preventDefault();
if (document.getElementById(srcFFR).classList == document.getElementById(destFFR).classList) {
return false;}
else {
document.getElementById(srcFFRb).click();
}});
I'm at a bit of a loss...any help would be greatly appreciated.
Aucun commentaire:
Enregistrer un commentaire