Переключение отдельных тумблеров в таблице

Question

У меня есть уникальные идентификаторы для динамических компоновок в строках таблицы, и я получил css, соответствующим образом захватывая их, используя [attr * = "checkbox"];однако, независимо от того, какой переключатель я нажимаю, переключается только верхний. У меня сейчас 0 JS, и я не знаю, с чего начать переключение отдельных из них, поскольку они генерируются динамически. Я нашел, как установить атрибуты в true и false. Но все, что я нашел в Интернете, не так просто.

 <table class="table table-hover table-md ">

    <thead>
       <tr>
        <td class="text-left tableHead">RoleId</td>
        <td class="text-left tableHead">Role</td>
        <td class="text-right tableHead">Delete</td>
          </tr>
    </thead>
           @*--Table Body For Each to pull DB records--*@
              <tbody>
                @{int i = 0;}
                @foreach (var role in Model.Roles)
                 {                                   
                  <tr>                                
                    <td>@role.RoleID</td>
                    <td>@role.RoleName</td>
                    <td>
                    <input type="checkbox" name="checkbox" id="checkbox@(i)" class="ios-toggle"/>
                    <label for="checkbox@(i)" class="checkbox-label float-right"></label>
                    </td>

                  </tr>                                       
                  i++;
                 }
               </tbody>
 </table>

css:

.ios-toggle, .ios-toggle:active {
    position: absolute;
    top: -5000px;
    height: 0;
    width: 0;
    opacity: 0;
    border: none;
    outline: none;
}

.checkbox-label {
    display: block;
    position: relative;
    /* padding: 10px; */
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 16px;
    width: 35%;
    height: 25px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    background: #f8f8f8;
    cursor: pointer;
}

    .checkbox-label:before {
        content: '';
        display: block;
        position: sticky;
        z-index: 1;
        line-height: 34px;
        text-indent: 40px;
        height: 25px;
        width: 25px;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        top: 0px;
        left: 0px;
        /* right: auto; */
        background: white;
        -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.2), 0 0 0 2px #dddddd;
        -moz-box-shadow: 0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
        box-shadow: 0 3px 3px rgba(0,0,0,.2), 0 0 0 2px #dddddd;
    }

    .checkbox-label:after {
        content: attr(data-off);
        display: block;
        position: absolute;
        z-index: 0;
        top: 0;
        left: -300px;
        padding: 10px;
        height: 100%;
        width: 300px;
        text-align: right;
        color: #bfbfbf;
        white-space: nowrap;
    }

.ios-toggle:checked + .checkbox-label {
    /*box-shadow*/
    -webkit-box-shadow: inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
    -moz-box-shadow: inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
    box-shadow: inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
}

    .ios-toggle:checked + .checkbox-label:before {
        left: calc(100% - 36px);
        /*box-shadow*/
        -webkit-box-shadow: 0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
        -moz-box-shadow: 0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
        box-shadow: 0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
    }

/* GREEN CHECKBOX */

[id*="checkbox"] + .checkbox-label {
    /*box-shadow*/
    -webkit-box-shadow: inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
    -moz-box-shadow: inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
    box-shadow: inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
}

[id*="checkbox"]:checked + .checkbox-label {
    /*box-shadow*/
    -webkit-box-shadow: inset 0 0 0 18px rgba(0, 154, 68, 1),0 0 0 2px rgba(0, 154, 68, 1);
    -moz-box-shadow: inset 0 0 0 18px rgba(0, 154, 68, 1),0 0 0 2px rgba(0, 154, 68, 1);
    box-shadow: inset 0 0 0 18px rgba(0, 154, 68, 1),0 0 0 2px rgba(0, 154, 68, 1);
}

    [id*="checkbox"]:checked + .checkbox-label:after {
        color: #009A44 !important;
    }

Answer 1

Не зная данных вашей модели, я смог составить временную таблицу с вашим кодом. Я изменил ваш селектор в вашем .css коде с [id^="checkbox"] на "input:checkbox[id^='checkbox']". Это будет устанавливать ваши флажки, где их идентификатор начинается с checkbox, так как кажется, что все они будут. Это также, кажется, выбирает каждый отдельный флажок. Надеюсь, это толчок в правильном направлении для вас.

Рабочая jsfiddle: https://jsfiddle.net/2kz1e5fd/