0
votes

JQuery - deux sélectionner, option - compter entre et désactiver

J'ai besoin de conseils. J'ai un certain nombre de pièces, par exemple 2 ou plus. Standard pour une personne et «célibataire» Standard pour deux personnes et avec «double» C'est toujours la même chambre. Cela signifie que si je sélectionne 1x Single, l'option 2x double option sera désactivée et l'option 1x disponible restera et vice versa.

Maintenant, je ne peux que bloquer l'ensemble de la sélection. J'ai seulement besoin de bloquer des options. P>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Typ</th>
      <th scope="col">Night</th>
      <th scope="col">Price 1 room</th>
      <th scope="col">Number of rooms</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"><i class="fa fa-user" aria-hidden="true"></i></th>
      <td>2</td>
      <td>5 â‚¬</td>
      <td>

        <select name="standard1" id="frm-step1-standard1">
          <option style="color: red;" value="0">0</option>
          <option style="color: red;" value="1">1</option>
          <option style="color: red;" value="2">2</option>
        </select>

      </td>
    </tr>
    <tr>
      <th scope="row"><i class="fa fa-user" aria-hidden="true"></i> <i class="fa fa-user" aria-hidden="true"></i></th>
      <td>2</td>
      <td>0 â‚¬</td>
      <td>

        <select name="standard12" id="frm-step1-standard12">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>

      </td>
    </tr>
  </tbody>
</table>

jquery

0 commentaires

3 Réponses :

1
votes

J'espère que c'est votre réponse:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Typ</th>
      <th scope="col">Night</th>
      <th scope="col">Price 1 room</th>
      <th scope="col">Number of rooms</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"><i class="fa fa-user" aria-hidden="true"></i></th>
      <td>2</td>
      <td>5 â‚¬</td>
      <td>

        <select name="standard1" id="frm-step1-standard1">
          <option style="color: red;" value="0">0</option>
          <option style="color: red;" value="1">1</option>
          <option style="color: red;" value="2">2</option>
        </select>

      </td>
    </tr>
    <tr>
      <th scope="row"><i class="fa fa-user" aria-hidden="true"></i> <i class="fa fa-user" aria-hidden="true"></i></th>
      <td>2</td>
      <td>0 â‚¬</td>
      <td>

        <select name="standard12" id="frm-step1-standard12">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>

      </td>
    </tr>
  </tbody>
</table>

4 commentaires

Merci, mais ce n'est pas encore. La somme de sélectionnez une et deux valeurs peut être max 2. J'en sélectionne un = 1, puis sélectionnez deux peut être max 1 Sélectionnez une + Sélectionnez deux = 2

@ AHA009 Vérifiez à nouveau!

Il y a toujours une erreur. Lorsque je sélectionne, sélectionnez une = 2, je peux sélectionner Sélectionner deux = 1. La somme doit être max 2.

Essayez avec: var x = 1;

0
votes

J'ai développé la solution de @Foadabd

Y a-t-il une solution plus élégante? J'en ai besoin pour être dynamique. Var X peut être n'importe quel nombre. P>

Il ne fonctionne toujours pas correctement. p>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Typ</th>
      <th scope="col">Night</th>
      <th scope="col">Price 1 room</th>
      <th scope="col">Number of rooms</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"><i class="fa fa-user" aria-hidden="true"></i></th>
      <td>2</td>
      <td>5 â‚¬</td>
      <td>

        <select name="standard1" id="frm-step1-standard1">
          <option style="color: red;" value="0">0</option>
          <option style="color: red;" value="1">1</option>
          <option style="color: red;" value="2">2</option>
        </select>

      </td>
    </tr>
    <tr>
      <th scope="row"><i class="fa fa-user" aria-hidden="true"></i> <i class="fa fa-user" aria-hidden="true"></i></th>
      <td>2</td>
      <td>0 â‚¬</td>
      <td>

        <select name="standard12" id="frm-step1-standard12">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>

      </td>
    </tr>
  </tbody>
</table>

0 commentaires

0
votes

J'ai réduit le code afin que vous n'ayez pas besoin d'avoir plusieurs instructions de changement pour les dépositions.

Démo strong> p>

0 commentaires