Daniel H.
Daniel H.

Reputation: 680

jQuery value includes any of array

I updated the question as per a helpful answer, that brought me closer, but sadly did not quite achieve what I needed.

UPDATE:

I am trying to create a jQuery function that will disable any checkboxes with a value that matches any part of the currently checked checkbox's value.

$(document).ready(function() {
  $('input[id^="takaritas"]').click(function() {
    if ($("#kategoria").val() == "") {
      $('input[id^="takaritas"]').prop("checked", false);
      $('input[id^="takaritas"]').val("");
      alert("Válasszon autó kategóriát!");
    } else if ($("#takaritasnincs").is(":checked")) {
      $('input[id^="takaritas"]').not(this).attr("disabled", "disabled");
      $('input[id^="takaritas"]').not(this).prop("checked", false);
      $('input[id^="takaritaskoltseg"]').val("");
    } else if ($(this).not("#takaritasnincs").is(":checked")) {

      let array = $(this).val().split(" ");
      array.forEach((el, index) => {
        array[index] = array[index].replace("mosás", "").replace("Polír", "");
      });
      const filteredArray = array.filter((x) => x !== "+");
      filteredArray.forEach((el) => {

        let input = document.querySelector('[value="' + el + '"]');
        if (input) {
          document.querySelector(
            'input[type="checkbox"][value="' + el + '"]'
          ).disabled = true;
          document.querySelector(
            'input[type="checkbox"][value="' + el + '"]'
          ).checked = false;
        }
      });
    } else {
      $('input[id^="takaritas"]').removeAttr("disabled");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="takaritas-inline">
<input type="checkbox" id="takaritasnincs" name="takaritasnincs" value="nincs">nincs</label>
<br>

<label class='takaritas-inline'>
<input type='checkbox' name='takaritas[]' id='takaritas1' onclick='takaritasKalk(this, 0)' value='Külső mosás'>Külső mosás</label>
<br>

<label class='takaritas-inline'>
<input type='checkbox' name='takaritas[]' id='takaritas2' onclick='takaritasKalk(this, 1)' value='Belső mosás'>Belső mosás</label>
<br>


<label class='takaritas-inline'>
<input type='checkbox' name='takaritas[]' id='takaritas3' onclick='takaritasKalk(this, 2)' value='Külső + Belső mosás'>Külső + Belső mosás</label>
<br>


<label class='takaritas-inline'>
<input type='checkbox' name='takaritas[]' id='takaritas4' onclick='takaritasKalk(this, 3)' value='Külső + Belső + Wax + Motormosás'>Külső + Belső + Wax + Motormosás</label>
<br>


<label class='takaritas-inline'>
<input type='checkbox' name='takaritas[]' id='takaritas5' onclick='takaritasKalk(this, 4)' value='Polír'>Polír</label>
<br>


<label class='takaritas-inline'><input type='checkbox' name='takaritas[]' id='takaritas6' onclick='takaritasKalk(this, 5)' value='Kárpit'>Kárpit</label>
<br>


<label class='takaritas-inline'>
<input type='checkbox' name='takaritas[]' id='takaritas7' onclick='takaritasKalk(this, 6)' value='Kárpit + Wax'>Kárpit + Wax</label>
<br>


<label class='takaritas-inline'>
<input type='checkbox' name='takaritas[]' id='takaritas8' onclick='takaritasKalk(this, 7)' value='Lámpa Polír'>Lámpa Polír</label>
<br>


<label class='takaritas-inline'>
<input type='checkbox' name='takaritas[]' id='takaritas9' onclick='takaritasKalk(this, 8)' value='Komplett (polír+kárpit)'>Komplett (polír+kárpit)</label>

Clicking a checkbox with "Külső + Belső + Wax + Motormosás" as the value returns me this array:

["Külső", "+", "Belső", "+", "Wax", "+", "Motormosás"]

I need the function to disable any checkbox that includes any part of that array, ignoring the plus signs and the partial strings "mosás" and "polír".

Any help would be highly appreciated.

Upvotes: 0

Views: 66

Answers (1)

Simone Rossaini
Simone Rossaini

Reputation: 8162

You can filter the array then disabled it if exist like:

let array = ["Külső", "+", "Belső", "+", "Wax", "+", "Motormosás"];
array.forEach((el, index) => {
  array[index] = array[index].replace('mosás', '');
});
const filteredArray = array.filter(x => x !== '+');
filteredArray.forEach(el => {
  let input = document.querySelector('[value="' + el + '"]');
  if (input) {
    input.disabled = true;
  }
});
<div>
  <input type="checkbox" id="Wax" name="test" value="Wax">
  <label for="Wax">Wax</label>
</div>

<div>
  <input type="checkbox" id="Belso" name="test2" value="Belső">
  <label for="Belso">Belső</label>
</div>

<div>
  <input type="checkbox" id="testvaluenodisable" name="test3" value="testvaluenodisable">
  <label for="testvaluenodisable">testvaluenodisable</label>
</div>


Edit after update: You need to use querySelectorAll with wildcard *= for match all values have one element of array, then foreach that and disable it.

function takaritasKalk(element, number) {
  let array = element.value.split(' ');
  array.forEach((el, index) => {
    array[index] = array[index].replace('mosás', '');
  });
  const filteredArray = array.filter(x => x !== '+');
  filteredArray.forEach(el => {
    let input = document.querySelectorAll('input[type="checkbox"][value*="' + el + '"]');
    if (input[0]) {
      input.forEach(inputFinal => {
        if (inputFinal.id !== element.id) {
          if (!element.checked) {
            inputFinal.disabled = false;
          } else {
            inputFinal.disabled = true;
          }
        }
      });
    }
  });
}
<label class="takaritas-inline">
<input type="checkbox" id="takaritasnincs" name="takaritasnincs" value="nincs">nincs</label>
<br>

<label class='takaritas-inline'>
<input type='checkbox' name='takaritas[]' id='takaritas1' onclick='takaritasKalk(this, 0)' value='Külső mosás'>Külső mosás</label>
<br>

<label class='takaritas-inline'>
<input type='checkbox' name='takaritas[]' id='takaritas2' onclick='takaritasKalk(this, 1)' value='Belső mosás'>Belső mosás</label>
<br>


<label class='takaritas-inline'>
<input type='checkbox' name='takaritas[]' id='takaritas3' onclick='takaritasKalk(this, 2)' value='Külső + Belső mosás'>Külső + Belső mosás</label>
<br>


<label class='takaritas-inline'>
<input type='checkbox' name='takaritas[]' id='takaritas4' onclick='takaritasKalk(this, 3)' value='Külső + Belső + Wax + Motormosás'>Külső + Belső + Wax + Motormosás</label>
<br>


<label class='takaritas-inline'>
<input type='checkbox' name='takaritas[]' id='takaritas5' onclick='takaritasKalk(this, 4)' value='Polír'>Polír</label>
<br>


<label class='takaritas-inline'><input type='checkbox' name='takaritas[]' id='takaritas6' onclick='takaritasKalk(this, 5)' value='Kárpit'>Kárpit</label>
<br>


<label class='takaritas-inline'>
<input type='checkbox' name='takaritas[]' id='takaritas7' onclick='takaritasKalk(this, 6)' value='Kárpit + Wax'>Kárpit + Wax</label>
<br>


<label class='takaritas-inline'>
<input type='checkbox' name='takaritas[]' id='takaritas8' onclick='takaritasKalk(this, 7)' value='Lámpa Polír'>Lámpa Polír</label>
<br>


<label class='takaritas-inline'>
<input type='checkbox' name='takaritas[]' id='takaritas9' onclick='takaritasKalk(this, 8)' value='Komplett (polír+kárpit)'>Komplett (polír+kárpit)</label>

Upvotes: 2

Related Questions