取消選中復選框時禁用“選擇”
[英]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.