Tengo una serie de elementos CheckBox cuyo Id coincide con los valores de las etiquetas dentro del mismo formulario.
Mi intención es que, cuando marque una casilla de verificación, la etiqueta se seleccione.
Cuando desmarco la casilla de verificación, la etiqueta se deselecciona.
Esta implementación es para una etiqueta de selección con selección múltiple.
codigo js
function setPermissions(val) { var checkBox = document.getElementById(String(val)); if (checkBox.checked) { $("#permissions option[value=" + val + "]").prop("selected", false); } else { console.log("!checked", val); $("#permissions option[value=" + val + "]").prop('selected', true); //$("#permissions option[value=" + val + "]").attr('selected', 'selected'); } }Caja
@foreach (var p in ViewBag.Permissions) { <li class="form-control"> <input class="isCheckbox" style="vertical-align:middle" type="checkbox" value="@p.id" id="@p.id" onclick="setPermissions(@p.id)"> <label for="@p.id"> @p.name </label> </li> }Seleccione
<select id="permissions"> @foreach (var item in ViewBag.Permissions) { <option value="@item.id"></option> }Use onchange en lugar de onclick
No estoy 100% seguro de lo que quieres que haga, pero esto podría resolver tus problemas
function setPermissions(obj) { $("#permissions option[value=" + obj.value + "]").prop('selected', obj.checked); }Manifestación
function setPermissions(obj) { $("#permissions option[value=" + obj.value + "]").prop('selected', obj.checked); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="form-control"> <input class="isCheckbox" style="vertical-align:middle" type="checkbox" value="test1" id="test1" onclick="setPermissions(this)"> <label for="test1"> test1 </label> </li> <li class="form-control"> <input class="isCheckbox" style="vertical-align:middle" type="checkbox" value="test2" id="test2" onclick="setPermissions(this)"> <label for="test2"> test2 </label> </li> <li class="form-control"> <input class="isCheckbox" style="vertical-align:middle" type="checkbox" value="test3" id="test3" onclick="setPermissions(this)"> <label for="test3"> test3 </label> </li> </ul> <select id="permissions" multiple> <option value="test1">test1</option> <option value="test2">test2</option> <option value="test3">test3</option> </select>Cuando checkBox.checked es verdadero, debe usar prop('selected', true) , y cuando es falso, use prop('selected', false) . Es por eso que su js no funciona.
function setPermissions(val) { var checkBox = document.getElementById(String(val)); if (checkBox.checked) { $("#permissions option[value=" + val + "]").prop("selected", true); } else { console.log("!checked", val); $("#permissions option[value=" + val + "]").prop('selected', false); //$("#permissions option[value=" + val + "]").attr('selected', 'selected'); } }