Disable SELECT options if it already has value

Navigation
1

I have this form, I want with Jquery that when it is already selected for example the value 1 of a select of disable in the other select. Maybe it's not the best practice but it was how I came up with it. I accept optimization suggestions. 

      <table class="table-bordered table-hover">
    <thead>
      <tr>
        <th>Cubrir esta guardia</th>
        <th>Fecha</th>
        <th>Descripción</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <select name="g1">
            <option disabled selected>Nivel de preferencia</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
          </select>
        </td>
        <td>Domingo 1 de Enero</td>
        <td>Año nuevo</td>
      </tr>

      <tr>
        <td>
          <select name="g2">
            <option disabled selected>Nivel de preferencia</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
          </select>
        </td>
        <td>Lunes 6 de Febrero</td>
        <td>Día de la constitución mexicana</td>
      </tr>

      <tr>
        <td>
          <select name="g3">
            <option disabled selected>Nivel de preferencia</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
          </select>
        </td>
        <td>Lunes 20 de Marzo</td>
        <td>Natalicio de Benito Juárez</td>
      </tr>

      <tr>
        <td>
          <select name="g4">
            <option disabled selected>Nivel de preferencia</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
          </select>
        </td>
        <td>Domingo 16 de Abril</td>
        <td>Domingo de resurección</td>
      </tr>

      <tr>
        <td>
          <select name="g5">
            <option disabled selected>Nivel de preferencia</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
          </select>
        </td>
        <td>Lunes 1 de Mayo</td>
        <td>Día del trabajo</td>
      </tr>

      <tr>
        <td>
          <select name="g6">
            <option disabled selected>Nivel de preferencia</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
          </select>
        </td>
        <td>Sábado 16 de Septiembre</td>
        <td>Día de la independencia</td>
      </tr>

      <tr>
        <td>
          <select name="g7">
            <option disabled selected>Nivel de preferencia</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
          </select>
        </td>
        <td>Lunes 20 de Noviembre</td>
        <td>Revolución Mexicana</td>
      </tr>

      <tr>
        <td>
          <select name="g8">
            <option disabled selected>Nivel de preferencia</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
          </select>
        </td>
        <td>Domingo 25 de Diciembre</td>
        <td>Navidad</td>
      </tr>
    </tbody>
  </table>
    
asked by Alberto Siurob 27.11.2016 в 01:00
source

1 answer

1

Look to see if this works for you. 

$("select").on("change",function(){
        var valor=$(this).val();
        $("select").find("option[value='"+valor+"']").prop("disabled",true);
    });
    
answered by 28.11.2016 в 17:51
Place an image in PHP excel With an external path Concatenate checkbox