<div class="control">
  <select id="mask-type">
    <option value="ichimatsu">市松模様</option>
    <option value="shimashima">縞々</option>
    <option value="guruguru">ぐるぐる</option>
  </select>

  <label>
    <input type="checkbox" checked>
    <span>Maskあり</span>
  </label>
</div>
<img src="https://picsum.photos/300/200" width="300" height="200" class="enabled">

.ichimatsu {
  mask-image: conic-gradient(
    rgba(0, 0, 0, 0) 0.25turn,
    #000 0.25turn 0.5turn,
    rgba(0, 0, 0, 0) 0.5turn 0.75turn,
    #000 0.75turn
  );
  mask-size: 50px 50px;
}

.shimashima {
  mask-image: repeating-linear-gradient(
    -45deg,
    rgb(0, 0, 0),
    rgb(0, 0, 0) 5px,
    rgba(0, 0, 0, 0.2) 5px,
    rgba(0, 0, 0, 0.2) 10px
  );
}

.guruguru {
  mask-image: repeating-radial-gradient(
    rgb(0, 0, 0),
    rgb(0, 0, 0) 10px,
    rgba(0, 0, 0, 0.2) 10px,
    rgba(0, 0, 0, 0.2) 20px
  );
  mask-repeat: no-repeat;
}

img.disabled {
  mask: none;
}

html,
body {
  height: 100%;
}

html {
  font-family: system-ui;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  background-image: linear-gradient(
    45deg,
    hsl(240deg 87% 9%) 0%,
    hsl(220deg 97% 10%) 21%,
    hsl(214deg 100% 12%) 30%,
    hsl(210deg 100% 13%) 39%,
    hsl(206deg 100% 15%) 46%,
    hsl(203deg 100% 17%) 54%,
    hsl(201deg 100% 18%) 61%,
    hsl(198deg 100% 20%) 69%,
    hsl(196deg 100% 21%) 79%,
    hsl(194deg 100% 22%) 100%
  );
}

.control {
  display: flex;
  align-items: center;
  gap: 120px;
  margin-bottom: 1rem;
}

.control select {
  padding: 2px;
}

const img = document.querySelector("img");
const select = document.querySelector(".control select");
const checkbox = document.querySelector(".control input");

const options = document.querySelectorAll(".control option");
const classNames = [...options].map(o => o.value);

img.classList.add(classNames[0]);

select.addEventListener("change", ev => {  
  for (const cn of classNames) {
    img.classList.remove(cn);
  }
  img.classList.add(ev.target.value);
});

checkbox.addEventListener("change", ev => {
  if (ev.target.checked) {
    img.classList.remove("disabled");
    select.disabled = false;
  } else {
    img.classList.add("disabled");
    select.disabled = true;
  }
});