Unable to set property 'selected' using JS-CodePudding

I have a series of CheckBox elements whose Id matches the values of tags within the same form.

My intention is that, when I Check a checkbox, the tag gets selected.

When I uncheck the checkbox, the tag gets deselected.

This implementation is for a select tag with multi-select.

JS code

    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');
    }
}

Checkbox

   @foreach (var p in ViewBag.Permissions)
    {
        <li >
            <input  style="vertical-align:middle" type="checkbox" value="@p.id" id="@p.id" onclick="setPermissions(@p.id)">
            <label for="@p.id">
                @p.name
            </label>
        </li>
    }

Select

<select id="permissions">
@foreach (var item in ViewBag.Permissions)
{
    <option value="@item.id"></option>
}

CodePudding user response：

Use onchange instead of onclick

CodePudding user response：

Not 100% sure what you want it to do, but this might solve your problems

function setPermissions(obj) {
  $("#permissions option[value="   obj.value   "]").prop('selected', obj.checked);
}

Demo

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 >
    <input  style="vertical-align:middle" type="checkbox" value="test1" id="test1" onclick="setPermissions(this)">
    <label for="test1">
                test1
            </label>
  </li>
  <li >
    <input  style="vertical-align:middle" type="checkbox" value="test2" id="test2" onclick="setPermissions(this)">
    <label for="test2">
                test2
            </label>
  </li>
  <li >
    <input  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>