How to locate a check box based on the following html - Selenium WebDriver and C# : <p>I'm trying to enable specific check boxes contained within a page.  Please see the HTML code below</p>

<pre><code>&lt;div class="form-horizontal"&gt;

        &lt;div class="row"&gt;

            &lt;div class="col-sm-3"&gt;
                &lt;label for="Url_url_option1"&gt;Option 1&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-1"&gt;
                &lt;input type="checkbox" data-yesno-name="Url_option1" class="url-field-toggle"&gt;
        &lt;span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"&gt;&lt;/span&gt;
                &lt;input id="Url_option1" name="Url.url_option1" type="hidden" value="no"&gt;
                &amp;nbsp;
            &lt;/div&gt;


            &lt;div class="col-sm-3"&gt;
                &lt;label for="Url_option2"&gt;Option 2&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-1"&gt;
                &lt;input type="checkbox" data-yesno-name="Url_option2" class="url-field-toggle"&gt;
        &lt;span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"&gt;&lt;/span&gt;
                &lt;input id="Url_option2" name="Url.option2" type="hidden" value="no"&gt;
                &amp;nbsp;
            &lt;/div&gt;


            &lt;div class="col-sm-3"&gt;
                &lt;label for="Url_option3"&gt;Option 3&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-1"&gt;
                &lt;input type="checkbox" data-yesno-name="Url_option3" class="url-field-toggle"&gt;
        &lt;span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"&gt;&lt;/span&gt;
                &lt;input id="Url_option3" name="Url.option3" type="hidden" value="no"&gt;
                &amp;nbsp;
            &lt;/div&gt;
        &lt;/div&gt;



        &lt;div class="row"&gt;
            &lt;div class="col-sm-12"&gt;
                &amp;nbsp;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;

            &lt;div class="col-sm-3"&gt;
                &lt;label for="Url_option4"&gt;Option 4&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-1"&gt;
                &lt;input type="checkbox" data-yesno-name="Url_option4" class="url-field-toggle"&gt;
        &lt;span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"&gt;&lt;/span&gt;
                &lt;input id="Url_option4" name="Url.option4" type="hidden" value="no"&gt;
                &amp;nbsp;
            &lt;/div&gt;

            &lt;div class="col-sm-3"&gt;
                &lt;label for="Url_option5"&gt;Option 5&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-1"&gt;
                &lt;input type="checkbox" data-yesno-name="Url_option5" class="url-field-toggle"&gt;
        &lt;span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"&gt;&lt;/span&gt;
                &lt;input id="Url_option5" name="Url.option5" type="hidden" value="no"&gt;
                &amp;nbsp;
            &lt;/div&gt;

            &lt;div class="col-sm-3"&gt;
                &lt;label for="Url_option6"&gt;Option 6&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-1"&gt;
                &lt;input type="checkbox" data-yesno-name="Url_option6" class="url-field-toggle"&gt;
        &lt;span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"&gt;&lt;/span&gt;
                &lt;input id="Url_option6" name="option6" type="hidden" value="no"&gt;
                &amp;nbsp;
            &lt;/div&gt;

        &lt;/div&gt;

    &lt;/div&gt;
</code></pre>

<p>All of the check box elements apepar to be unique so I can use standard by locators to find each checkbox but, when I try to click on any of them, I can an "Element not found" exception.<br>
Is the "Hidden" type preventing these buttons from being clicked on?</p>

<p>The only way I can sucessfully click on a check box is by finding and clicking on the following element:</p>

<pre><code>&lt;span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"&gt;&lt;/span&gt;
</code></pre>

<p>by using an xpath locator:</p>

<pre><code>//*[@id="toggle_undefined"]
</code></pre>

<p>This works ok.  The click event gets fired sucessfully to the checkbox but this will obviously only fire the click to the first element (check box) on the page.  </p>

<p>Let's assume I wanted to use this xpath locator to click on the second check box from the second row, how would I make the xpath unique for each element (check box) on the page?</p>

<p>From the HTML code above, this is the second check box from the second row:</p>

<pre><code> &lt;div class="col-sm-3"&gt;
                &lt;label for="Url_option5"&gt;Option 5&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-1"&gt;
                &lt;input type="checkbox" data-yesno-name="Url_option5" class="url-field-toggle"&gt;
        &lt;span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"&gt;&lt;/span&gt;
                &lt;input id="Url_option5" name="Url.option5" type="hidden" value="no"&gt;
                &amp;nbsp;
            &lt;/div&gt;  
</code></pre>
