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.
CodePudding user response:
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>