stackoom
  简体   繁体   中英

disable "select" when the checkbox is unchecked

 原文  2022-08-29 17:15:17  8   4    javascript/ jquery

Question

 <div class="wcpa_form_item wcpa_type_checkbox-group wcpa_form_id_9547 eye_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-checkbox-group-1661439693440" data-type="checkbox-group"> <div class="checkbox-group eye_od "data-validation="{"label":"checkbox-group-1661439693440"}"> <div class="wcpa_checkbox"> <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 class="wcpa_check"></span>Occhio Destro</label> </div> </div> </div> <div class="wcpa_form_item wcpa_type_select wcpa_form_id_9547 gradazione_os_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-select-1661440462701" data-type="select"> <label for="select-1661440462700">gradazione OD<span class="required_ast">*</span></label> <div class="select"> <select name="select-1661440462700" class="gradazione_os_od " 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 class="select_arrow"></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

4 answers

solution1
 0  2022-08-29 17:39:03

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 class="wcpa_form_item wcpa_type_checkbox-group wcpa_form_id_9547 eye_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-checkbox-group-1661439693440" data-type="checkbox-group"> <div class="checkbox-group eye_od "data-validation="{"label":"checkbox-group-1661439693440"}"> <div class="wcpa_checkbox"> <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 class="wcpa_check"></span>Occhio Destro</label> </div> </div> </div> <div class="wcpa_form_item wcpa_type_select wcpa_form_id_9547 gradazione_os_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-select-1661440462701" data-type="select"> <label for="select-1661440462700">gradazione OD<span class="required_ast">*</span></label> <div class="select"> <select id='mySelect' name="select-1661440462700" class="gradazione_os_od " 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 class="select_arrow"></div> </select> </div> </div>

solution2
 0  2022-08-31 07:35:40

 <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 class="wcpa_form_item wcpa_type_checkbox-group wcpa_form_id_9547 eye_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-checkbox-group-1661439693440" data-type="checkbox-group"> <div class="checkbox-group eye_od "data-validation="{"label":"checkbox-group-1661439693440"}"> <div class="wcpa_checkbox"> <input name="checkbox-group-1661439693440[0]" id="myCheckbox" value="occhio-destro" type="checkbox" checked="checked"> <label for="checkbox-group-1661439693440_3_0"> <span class="wcpa_check"></span>Occhio Destro</label> </div> </div> </div> <div class="wcpa_form_item wcpa_type_select wcpa_form_id_9547 gradazione_os_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-select-1661440462701" data-type="select"> <label for="select-1661440462700">gradazione OD<span class="required_ast">*</span></label> <div class="select"> <select id='mySelect' name="select-1661440462700" class="gradazione_os_od " 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 class="select_arrow"></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>

solution3
 0  2022-08-31 08:08:21

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 class="wcpa_form_item wcpa_type_checkbox-group wcpa_form_id_9547 eye_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-checkbox-group-1661439693440" data-type="checkbox-group"> <div class="checkbox-group eye_od "data-validation="{"label":"checkbox-group-1661439693440"}"> <div class="wcpa_checkbox"> <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 class="wcpa_check"></span>Occhio Destro</label> </div> </div> </div> <div class="wcpa_form_item wcpa_type_select wcpa_form_id_9547 gradazione_os_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-select-1661440462701" data-type="select"> <label for="select-1661440462700">gradazione OD<span class="required_ast">*</span></label> <div class="select"> <select name="select-1661440462700" class="gradazione_os_od " 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 class="select_arrow"></div> </select> </div> </div>

solution4
 0  2022-08-31 14:47:59

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.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Disable button when checkbox is unchecked Disable vueform/slider when checkbox is unchecked Enable/disable dropdowns when checkbox checked/unchecked Change the value of select dropdown when checkbox is unchecked selecting closest select from checkbox when unchecked? How to select unchecked checkbox Disable button when a checkbox in a ng-repeat list is unchecked disable link if checkbox s unchecked Disable form submission if checkbox is unchecked How to disable the link if the checkbox is unchecked
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM