Cómo marcar y desmarcar opciones de un select multiple con JQuery? Framework MaterializeCss

Hola qué tal les va?, estoy haciendo un formulario para una aplicacion y estoy usando el framework Materializecss. Tengo varios selects multiples y selects simples que basicamente integran todo el formulario y debo manejar dichos selects por medio de JS/JQuery pues la idea es que la aplicación sea lo más dinámica posible. Tengo el siguiente fragmento de codigo para mostrar un ejemplo de como son mis selects y asi poder explicar mejor el problema que tengo:

<div class="row">
  <span class="mostrar"></span>
  <div>
 
<div class="row">
  <div class="elegir">
    <select id="and_or">
        <option selected>Y</option>
        <option>O</option>
    </select>
  </div>
</div>
 
<div class="row">
  <div class="colores">
    <select id="myid" multiple="multiple" name="Seleccion[]">
        <option value="Ninguno" selected>Ninguno</option>
        <option> Amarillo</option>
        <option>Azul</option>
        <option>Rojo</option>
      </select>
  </div>
</div>

var ninguno = true;
 
function displayValores() {
  var selectValues = $("#myid").val() || [];
  var valorSelect1 = $("#and_or").val();
 
  // si Ninguno está marcado pero se marca algo diferente
  if (ninguno && (selectValues.length > 1 || selectValues[0] != "Ninguno")) {
    // desmarcar ninguno
    $("#myid option[value=Ninguno]").removeAttr("selected");
    // actualizar los nuevos valores seleccionados
    selectValues = $("#myid").val()
    // indicar que Ninguno ya no está marcado
    ninguno = false;
  // si Ninguno no está marcado y se marca
  } else if (!ninguno && selectValues.indexOf("Ninguno") > -1) {
    // dejarlo como único valor
    $("#myid").val("Ninguno");
    // actualizar los nuevos valores seleccionados
    selectValues = $("#myid").val()
    // indicar que Ninguno ya está marcado
    ninguno = true;
  }
 
  $('.mostrar').html(selectValues.join(" " + valorSelect1 + " "));
}
 
$("select").change(displayValores);
displayValores();

Lo que estoy intentando lograr es que al seleccionar la opción Amarillo, Azul o Rojo la opción "Ninguno" (que esta seleccionada por defecto) se desmarque, que ya no aparezca seleccionada. Y cuando tenga colores seleccionados y decida darle click a la opción Ninguno, pues que esos colores se desmarquen, que ya no aparezcan seleccionados. El codigo JS anterior deberia funcionar a la perfección pero no es asi, cuando selecciono alguno de los colores, la casilla de selección (checkbox) de la opción "Ninguno" no se desmarca. No se si sea problema a nivel de framework ya que, cuando se crea un elemento select en materialize, automáticamente se crean unos elementos ul y li que estan asociados a ese elemento "Select". Es decir, basicamente el select esta asociado a un elemento

y las opciones de ese select estan asociadas a elementos
• . Cómo podría resolver este problema? algún script que me puedan suministrar o alguna pagina que pueda consultar donde tengan información sobre esto que me pueda servir de apoyo o guia? Espero puedan ayudarme.
  ajax aplicación css html javascript jquery material_design. materialize web

  ---