取消选中复选框时禁用“选择”
[英]disable "select" when the checkbox is unchecked
问题描述
<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. 
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仅使用显示和隐藏执行此操作，但我需要禁用，有人可以帮助我吗？我真的在用 null 结果尝试所有这些，我正在网上寻找它们，我尝试的所有这些肯定都不起作用错了。 thanks谢谢
4 个解决方案
解决方案1
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.我不知道如何将 js 代码注入 wordpress 插件，但用于此目的的基本代码如下所示。 Make sure the id you are passing to the checkbox is unique.确保您传递给复选框的 id 是唯一的。
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>
解决方案2
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>
解决方案3
0 2022-08-31 08:08:21
This adds the ID's and event dynamically这会动态添加 ID 和事件
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>
解决方案4
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. 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或者在与插件通信的页脚中，实际上我找到了一个脚本来尝试在重新加载页面时启用插件内的复选框并且它可以工作，所以可以完成，但是你为我写的内容并没有接受它们，它没有为我分配元素内的 id，因此脚本不起作用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.