disable select if checkbox is checked

Question

I have a html/php script where there is a Select I want to be "disabled" if checkbox is not checked.

This is the script:

<input type="checkbox" name="stOne" id="stOne" value="1"/>

<select class="input" name="selectOne" id="selectOne">
    <?php
        $check_sql = mysql_query("SELECT * FROM DBtable");
        while ($check_row = mysql_fetch_assoc($check_sql))
        {
            $id = $check_row['id'];
            $st = $check_row['style'];

            echo "<option value='" . $st . "'>" . $st . "</option>";
        }
    ?>
</select>

I found many scripts here on stack overflow with a solution that didn't work in my code.

Can someone help me with this?

Is it possible to do this NOT with jQuery?

without JQuery, you won't be able to enable it again if the checkbox is checked again. Is it expected behavior? — Prashant, Jun 06 '16 at 09:55
@Prashant Jquery is born out of Plain Javascript, so javascript can do anything jquery is capable of. — Anupam, Jun 06 '16 at 10:07
I know that. Thank you. I asked, cuz OP specifically refused for JQuery in his post. It was not mentioned to use JS as even he is trying to achieve it via PHP script. — Prashant, Jun 06 '16 at 10:28

score 6 · Answer 1 · answered Jun 06 '16 at 10:00

Here is what you need in native JS:

window.onload = toggleSelect(); // to disable select on load if needed

function toggleSelect()
{
  var isChecked = document.getElementById("stOne").checked;
  document.getElementById("selectOne").disabled = !isChecked;
}

<input type="checkbox" name="stOne" id="stOne" value="1" onClick="toggleSelect()"/>
<select class="input" name="selectOne" id="selectOne">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

So it can work with only JS? I will put it in my code and check this out soon :) — NickiJey, Jun 06 '16 at 10:02

score 0 · Answer 2 · answered Jun 06 '16 at 10:02

You can do this using jquery as mentioned below -

<input type="checkbox" name="stOne" id="stOne" value="1"/>
<select class="input" name="selectOne" id="selectOne">
    <?php
        $check_sql = mysql_query("SELECT * FROM DBtable");
                while ($check_row = mysql_fetch_assoc($check_sql))
                {
                $id = $check_row['id'];
                $st = $check_row['style'];

                echo "<option value='" . $st . "'>" . $st . "</option>";
                }
    ?>
</select>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script>
$( "#stOne" ).change(function() {
if ($('#stOne').prop('checked')) {
     $(".input").prop("disabled", true);
}
else
{
     $(".input").prop("disabled", false);
}

});

</script>

score 0 · Answer 3 · answered Jun 06 '16 at 10:14

try this

      <input type="checkbox" name="stOne" id="stOne" value="1" onClick="disableChecked()"/>
  <select class="input" name="selectOne" id="selectOne">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
  </select>

  <script>
   window.onload = disableChecked(); 

   function disableChecked()
   {
     if($("#stOne").is(':checked')){
       $("#stOne").attr("disabled", true);
     }
    }

   </script>

disable select if checkbox is checked

3 Answers3

Linked