<div id="wcpa-checkbox-group-1661439693440" data-type="checkbox-group">
<div data-validation="{"label":"checkbox-group-1661439693440"}">
<div >
<input name="checkbox-group-1661439693440[0]" id="checkbox-group-1661439693440_3_0" value="occhio-destro" type="checkbox" checked="checked">
<label for="checkbox-group-1661439693440_3_0">
<span ></span>Occhio Destro</label>
</div>
</div>
</div>
<div id="wcpa-select-1661440462701" data-type="select">
<label for="select-1661440462700">gradazione OD<span >*</span></label>
<div >
<select name="select-1661440462700" required="required" data-validation="{"label":"gradazione OD","required":true,"requiredMessage":"Field is required"}">
<option value="">- scegli -</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<div ></div>
</select>
</div>
</div>i'm just starting to work with javascript i'm trying them all but i can't modify this function, i need that when i deselect the "right eye" checkbox the select is disabled, unfortunately it's a wordpress plugin that allows you to do this operation only with show and hide but i need to disable, can someone help me please i'm really trying them all with null results, i'm looking for them online and all the ones i try are definitely not working i'm wrong something. thanks
CodePudding user response：
I don't know how you could inject js code to your wordpress plugins but the basic code for this purpose goes like this. Make sure the id you are passing to the checkbox is unique.
function check()
{
if (document.getElementById('myCheckbox').checked)
{
document.getElementById("mySelect").disabled = false;
} else {
document.getElementById("mySelect").disabled = true;
}
}<div id="wcpa-checkbox-group-1661439693440" data-type="checkbox-group">
<div data-validation="{"label":"checkbox-group-1661439693440"}">
<div >
<input name="checkbox-group-1661439693440[0]" id="myCheckbox" value="occhio-destro" type="checkbox" checked="checked" onclick="check()">
<label for="checkbox-group-1661439693440_3_0">
<span ></span>Occhio Destro</label>
</div>
</div>
</div>
<div id="wcpa-select-1661440462701" data-type="select">
<label for="select-1661440462700">gradazione OD<span >*</span></label>
<div >
<select id='mySelect' name="select-1661440462700" required="required" data-validation="{"label":"gradazione OD","required":true,"requiredMessage":"Field is required"}">
<option value="">- scegli -</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<div ></div>
</select>
</div>
</div>CodePudding user response：
<html>
<head><title>disable "select" when the checkbox is unchecked</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="wcpa-checkbox-group-1661439693440" data-type="checkbox-group">
<div data-validation="{"label":"checkbox-group-1661439693440"}">
<div >
<input name="checkbox-group-1661439693440[0]" id="myCheckbox" value="occhio-destro" type="checkbox" checked="checked">
<label for="checkbox-group-1661439693440_3_0">
<span ></span>Occhio Destro</label>
</div>
</div>
</div>
<div id="wcpa-select-1661440462701" data-type="select">
<label for="select-1661440462700">gradazione OD<span >*</span></label>
<div >
<select id='mySelect' name="select-1661440462700" required="required" data-validation="{"label":"gradazione OD","required":true,"requiredMessage":"Field is required"}">
<option value="">- scegli -</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<div ></div>
</select>
</div>
</div>
<script>
$('#myCheckbox').on('change', function(event){
if($(this).prop("checked") == true)
{
$("#mySelect").prop('disabled',false);
}
else
{
$("#mySelect").prop('disabled',true);
}
});
</script>
</body>
</html>CodePudding user response：
This adds the ID's and event dynamically
var checkbox = $("input[type=checkbox]");
$(checkbox).attr('id', 'myCheckbox');
var select = $(".gradazione_os_od")[0];
$(select).attr('id', 'mySelect');
console.log(select);
function check(){
if ($('#myCheckbox').prop("checked"))
{
$("#mySelect").prop("disabled", false);
} else {
$("#mySelect").prop("disabled", true);
}
}
$('#myCheckbox').on( "change", function() {
check();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wcpa-checkbox-group-1661439693440" data-type="checkbox-group">
<div data-validation="{"label":"checkbox-group-1661439693440"}">
<div >
<input name="checkbox-group-1661439693440[0]" id="checkbox-group-1661439693440_3_0" value="occhio-destro" type="checkbox" checked="checked">
<label for="checkbox-group-1661439693440_3_0">
<span ></span>Occhio Destro</label>
</div>
</div>
</div>
<div id="wcpa-select-1661440462701" data-type="select">
<label for="select-1661440462700">gradazione OD<span >*</span></label>
<div >
<select name="select-1661440462700" required="required" data-validation="{"label":"gradazione OD","required":true,"requiredMessage":"Field is required"}">
<option value="">- scegli -</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<div ></div>
</select>
</div>
</div>CodePudding user response：
They are both valid solutions because I see that they work here but not on my page. I answer the reflection on how I can insert javascript in a plugin ... Actually not directly in the plugin, but in the functions.php page in the child theme, through a script that I found online I can insert the javascript in the header or in the footer that communicates with the plugin, in fact I had found a script to try to enable the checkboxes inside the plugin when reloading the page and it worked so it can be done, but what you wrote for me does not take them, it does not assign me the id inside the elements and therefore the script does not work.