取消选中复选框时禁用“选择”
[英]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仅使用显示和隐藏执行此操作，但我需要禁用，有人可以帮助我吗？我真的在用 null 结果尝试所有这些，我正在网上寻找它们，我尝试的所有这些肯定都不起作用错了。 谢谢
4 个解决方案
解决方案1
0 2022-08-29 17:39:03
我不知道如何将 js 代码注入 wordpress 插件，但用于此目的的基本代码如下所示。 确保您传递给复选框的 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
这会动态添加 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
它们都是有效的解决方案，因为我看到它们在这里工作但不在我的页面上。 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.