disable "select" when the checkbox is unchecked - Jquery

DavidE
August 29, 2022
185 views
2 votes
4 Answers

<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

Tags: javascript jquery

Answers

Chosen as BEST ANSWER
- DavidE
- August 31, 2022 at 4:47 pm
- 0 votes
0
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.

(Edit)

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>

<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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

disable "select" when the checkbox is unchecked – Jquery

Answers