JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<form method="post" id="aside-form">

  <ul class="ks-cboxtags">
          <li>
      <input type="radio" name="tags[]" id="Sanat - Edebiyat" value="Sanat - Edebiyat">
      <label for="Sanat - Edebiyat">Sanat - Edebiyat</label>
    </li>
    <li>
      <input type="radio" name="tags[]" id="Bilim" value="Bilim">
      <label for="Bilim">Bilim</label>
    </li>
    <li>
      <input type="radio" name="tags[]" id="Eğitim" value="Eğitim">
      <label for="Eğitim">Eğitim</label>
    </li>
    <li>
      <input type="radio" name="tags[]" id="Spor" value="Spor">
      <label for="Spor">Spor</label>
    </li>
    <li>
      <input type="radio" name="tags[]" id="Matematik" value="Matematik">
      <label for="Matematik">Matematik</label>
    </li>
          <li>
      <input type="radio" name="tags[]" id="İş ve Ekonomi" value="İş ve Ekonomi" required>
        <label for="İş ve Ekonomi">İş ve Ekonomi</label>
    </li>
    <li>
      <input type="radio" name="tags[]" id="Tarih" value="Tarih">
      <label for="Tarih">Tarih</label>
    </li>
    <li>
      <input type="radio" name="tags[]" id="Coğrafya" value="Coğrafya">
      <label for="Coğrafya">Coğrafya</label>
    </li>
    <li>
      <input type="radio" name="tags[]" id="Yazılım" value="Yazılım">
      <label for="Yazılım">Yazılım</label>
    </li>
    <li>
      <input type="radio" name="tags[]" id="Teknoloji" value="Teknoloji">
      <label for="Teknoloji">Teknoloji</label>
    </li>
    <li>
      <input type="radio" name="tags[]" id="Felsefe" value="Felsefe">
      <label for="Felsefe">Felsefe</label>
    </li>
    <li>
      <input type="radio" name="tags[]" id="Kimya" value="Kimya">
      <label for="Kimya">Kimya</label>
    </li>

    <li>
      <input type="radio" name="tags[]" id="Sağlık" value="Sağlık">
      <label for="Sağlık">Sağlık</label>
    </li>

    <li>
      <input type="radio" name="tags[]" id="Yabancı Dil" value="Yabancı Dil">
      <label for="Yabancı Dil">Yabancı Dil</label>
    </li>
   ...

CSS

form#aside-form {
    display: flex;
    flex-direction: column;
    width: 100%;

  }

  input#aside-title,
  textarea#aside-content {
    border-radius: 10px;
    border: 1px solid #d1d0d0;
    padding: 15px;
    margin-top: 20px
  }

  textarea#aside-content {
    min-height: 250px;
    padding-top: 20px
  }



  .linkler {
    display: flex
  }

.ask-question {
    border: 1px solid;
    width: 50%;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    padding: 10px;
    border-radius: 10px 0 0 10px;
}
.create-post {
    border: 1px solid;
    width: 50%;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    padding: 10px;
    border-radius: 0 10px 10px 0;
}

    
  .ask-question {
    background-color: #f6f7f7
  }

ul.ks-cboxtags {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 3 sütunlu grid */
    gap: 10px; /* Sütunlar ve satırlar arasındaki boşluk */
    padding: 20px;
}
  ul.ks-cboxtags li {
    list-style: none
  }

  ul.ks-cboxtags li label {
    display: inline-block;
    background-color: rgba(255, 255, 255, .9);
    border: 2px solid rgba(139, 139, 139, .3);
    color: #adadad;
    border-radius: 25px;
    white-space: nowrap;
    margin: 3px 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: all .2s;
  }

  ul.ks-cboxtags li label {
    padding: 8px 12px;
    cursor: pointer;
  }

  ul.ks-cboxtags li label::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    padding: 2px 6px 2px 2px;
    content: "＋";
    transition: transform .3s ease-in-out;
  }

  ul.ks-cboxtags li input[type="radio"]:checked+label::before {
    content: "✔";
    transform:...

JavaScript

const select = document.getElementById("type");
    const inputs = document.querySelectorAll("input[type='radio']");

    window.onload = function() {
      select.dispatchEvent(new Event('change'));
    }

    select.addEventListener("change", function() {
      const selectedValue = this.value;

      inputs.forEach(input => {
        input.checked = false;
        if (input.getAttribute("name") === selectedValue) {
          input.removeAttribute("disabled");
        } else {
          input.setAttribute("disabled", true);
        }
      })
    });