2

Tengo este formulario, quiero con Jquery que cuando ya esté seleccionado por ejemplo el valor 1 de un select de deshabilite en los otros select. Quizá no sea la mejor práctica pero fue como se me ocurrió. Acepto sugerencias de optimización.

      <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>

1
  • ¿Podrías agregar el código de lo que has intentado hasta ahora?
    – Marcos
    Commented el 27 nov. 2016 a las 2:49

1 respuesta 1

1

Mira a ver si te funciona esto.

$("select").on("change",function(){
        var valor=$(this).val();
        $("select").find("option[value='"+valor+"']").prop("disabled",true);
    });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.