Getting the state of a checkbox that is not a clickable point due to CSS

[delito]

Hi

Using Chrome and TC JavaScript I am trying to get the state of a checkbox on a screen but this screen has CSS applied to the checkbox so they have become a non clickable point like so:

<div _ngcontent-yjq-c790="" class="form-group row"><label _ngcontent-yjq-c790="" for="sampleRefechan" class="col-sm-6 col-form-label"> Show Refechan <app-tooltip _ngcontent-yjq-c790=""><!----></app-tooltip></label><div _ngcontent-yjq-c790="" class="col-sm-6"><input _ngcontent-yjq-c790="" type="checkbox" id="sampleRefechan" name="sampleRefechan" class="form-control with-font ng-untouched ng-pristine ng-valid"><label _ngcontent-yjq-c790="" for="sampleRefechan"></label></div></div>

I did notice if I deselect the values for height, width and clip in styles manually it became a clickable point and I could use that, but I'm not sure how to script this ? Or is there a better way to proceed ?

Thanks

delito

[delito · Accepted solution]

I managed to remove the classes from the screen for the CSS, that made the check boxes usable

function DisableCSSClass()
{
  let browser = Aliases.browser;
  let page = browser.pageClientApp4;
  var elements = page.FindElements('//*[@class="form-control with-font ng-untouched ng-pristine ng-valid"]').toArray();

  if (elements.length > 0)
  {
    for (var i = 0; i < elements.length; i++)
    {
      elements[i].className="form-control ng-untouched ng-pristine ng-valid";
    }
  }
  else
  {
    Log.Message("No element with this class found on the page.");
  }
}