CODEWITHSUNDEEP
javascriptjquery
francisco
francisco

Reputation: 33

multiple selects with same value do this

i have diferent select options with the same values in a table. how do i make that when all selects get the same value ("2") do something (add disabled atributte to an input)?

<table>
<td>
  <select class="class1">
    <option value="1">SI</option>
    <option value="2">NO</option>
  </select>
</td>

<td>
  <select class="class1">
    <option value="1">SI</option>
    <option value="2">NO</option>
  </select>
</td>

<td>
  <select class="class1">
    <option value="1">SI</option>
    <option value="2">NO</option>
  </select>
</td>

</table>

<input type="checkbox" class="checkbox" id="x">

Upvotes: 1

Views: 591

Answers (2)

matthias_h
matthias_h

Reputation: 11416

You can do it as follows: Push the value of each select in an array and use unique() to only keep unique values. In case you want to disable the input if the values of the selects are the same (either 1 or 2), disable the input if the length of this array is 1.

$("select").on("change", function() {
  let a = [];
  $("select").each(function() {
    a.push($(this).val());
    $.unique(a);
  });
  if (a.length === 1) {
    $(".checkbox").attr("disabled", true);
  }
  else {
    $(".checkbox").removeAttr("disabled");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td>
    <select class="class1">
      <option value="1">SI</option>
      <option value="2">NO</option>
    </select>
  </td>

  <td>
    <select class="class1">
      <option value="1">SI</option>
      <option value="2">NO</option>
    </select>
  </td>

  <td>
    <select class="class1">
      <option value="1">SI</option>
      <option value="2">NO</option>
    </select>
  </td>

</table>

<input type="checkbox" class="checkbox" id="x">

In case you only want to disable the input when the values of all selects are 2, you can do it as follows:

$("select").on("change", function() {
  let a = [];
  $("select").each(function() {
    a.push($(this).val());
    $.unique(a);
  });
  if (a.length === 1 && $.inArray("2", a !== -1)) {
    $(".checkbox").attr("disabled", true);
  }
  else {
    $(".checkbox").removeAttr("disabled");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td>
    <select class="class1">
      <option value="1">SI</option>
      <option value="2">NO</option>
    </select>
  </td>

  <td>
    <select class="class1">
      <option value="1">SI</option>
      <option value="2">NO</option>
    </select>
  </td>

  <td>
    <select class="class1">
      <option value="1">SI</option>
      <option value="2">NO</option>
    </select>
  </td>

</table>

<input type="checkbox" class="checkbox" id="x">

Upvotes: 1

PeterKA
PeterKA

Reputation: 24638

Read the values into an array values. If all of the values are 2 the disable the checkbox using .prop('disabled', true):

$('.class1').on('change', function() {
    let values = $('.class1').map(function() {
        return +this.value;
    }).get();
    values.some(checkValue) || $('#x').prop('disabled', true); 
});

function checkValue( value ) {
    return value !== 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td>
    <select class="class1">
      <option value="1">SI</option>
      <option value="2">NO</option>
    </select>
  </td>

  <td>
    <select class="class1">
      <option value="1">SI</option>
      <option value="2">NO</option>
    </select>
  </td>

  <td>
    <select class="class1">
      <option value="1">SI</option>
      <option value="2">NO</option>
    </select>
  </td>

</table>

<input type="checkbox" class="checkbox" id="x">

Upvotes: 1

Related Questions