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
– Prashant, Commented Jun 6, 2016 at 9:55
@Prashant Jquery is born out of Plain Javascript, so javascript can do anything jquery is capable of. — Anupam
– Anupam, Commented Jun 6, 2016 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
– Prashant, Commented Jun 6, 2016 at 10:28

ADreNaLiNe-DJ · Accepted Answer · 2016-06-06 10:00:42Z

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

Vipin CP · Accepted Answer · 2016-06-06 10:02:06Z

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>

D Coder · Accepted Answer · 2016-06-06 10:14:06Z

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>

Collectives™ on Stack Overflow

disable select if checkbox is checked

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related