Unable to check hidden custom checkbox-CodePudding

I have tried many options, but not successful so far to click on checkbox that are custom checkboxes with :before tag and are hidden. Can someone show me the way to resolve this issue. I tried X-Path and other selector, it finds and clicks on those checkboxes but those checkboxes don't get checked for some reason.

<fieldset >
                <legend>Services</legend>

                <ul >
                    <li><label for="AccountUsers_0__ViewOrders"><input data-val="true" data-val-required="The View Orders field is required." id="AccountUsers_0__ViewOrders" name="AccountUsers[0].ViewOrders" type="checkbox" value="true" ><span ></span><input name="AccountUsers[0].ViewOrders" type="hidden" value="false">View Orders</label></li>

Here is the screenshot of HTML

CodePudding user response：

   async Check() {
    const checkboxSelector = Selector(`[id="AccountUsers_0__ViewOrders"]`)
                             .with({visibilityCheck: true});
    if(!checkboxSelector.checked){
      await t.click(checkboxSelector);  
    }
    
    await t.expect(checkboxSelector.checked).eql(true, 'Should be checked')
  }

  async UnCheck() {
    const checkboxSelector = Selector(`[id="AccountUsers_0__ViewOrders"]`)
                             .with({visibilityCheck: true});
    if(checkboxSelector.checked){
      await t.click(checkboxSelector);
    }

    await t.expect(checkboxSelector.checked).eql(false, 'Should be unchecked')
  }

Please try this code and let me know

CodePudding user response：

You need to link only one input element to one label to use native checking. To hide a checkbox, you need to use a separate 'hidden' attribute, not "type=hidden" for the input element.