'Change disabled value in HTML document, if option element have specific value

I want if test2 is selected from <option> then disable all element inputs by via id element1. I try with if but dosnt work for me

function myFunction() {
    if (document.getElementById("element0").value = "test2") {
        document.getElementById("element1").disabled = true;
    } else {
        document.getElementById("element1").disabled = !0;
    }
}
<select name="" id="element0">
    <option value="test1">test1</option>
    <option value="test2">test2</option>
</select>

<div id="element1">
    <label for="your-name">Name: </label>
    <input type="text" name="your-name" id="" />
</div>
javascripthtml


Solution 1:[1]

Generally, you should have better naming for your fields and elements. Element0 does not accurately describe what it is or does. I chose a simple name here, but please think of a better name yourself.

The function itself can be simplified. You can assign constants for the element references so that you can reuse some code. It is more readable like this and you don't have to search twice for the same element (with .getElementById).

The disabled attribute can be the outcome of the expression, since it correlates.

function myFunction() {
  const dropdown = document.getElementById('dropdown');
  const name = document.getElementById('name');
  name.disabled = dropdown.value === 'test2';
}
<meta name="color-scheme" content="dark light" />

<body onload="myFunction()" oninput="myFunction()" style="zoom: 225%">

  <select name="dropdown" id="dropdown">
    <option value="test1">test1</option>
    <option value="test2">test2</option>
  </select>

  <div>
    <label for="name">Name: </label>
    <input type="text" name="name" id="name" />
  </div>
</body>

Solution 2:[2]

First, the comparison operator should be "===", not "=". Secondly, you should disable the input element, not the whole div(obviously, you can't do so). So, I added the id in input. Thirdly, !0 also means true so I changed it to false

function myFunction() {
  if (document.getElementById("element0").value === "test2") {
    document.getElementById("element1").disabled = true;
  } else {
    document.getElementById("element1").disabled = false;
  }
}
<select id="element0" onchange="myFunction()">
  <option value="test1">test1</option>
  <option value="test2">test2</option>
</select>

<div>
  <label for="your-name">Name: </label>
  <input type="text" name="your-name" id="element1" />
</div>

Solution 3:[3]

So you have a couple of issues with your code. First in your if clause you are making an assignment instead of a comparison: = is only for assignments like: let i = 0 and == or === are used for comparison, being the latter the most used one because is does not make type inference. Next you are disabling a div and not an input. So here's a rapid overview of my changes to your code:

    
  <select name="myOption" id="element0">
    <option value="test1">test1</option>
    <option value="test2">test2</option>
  </select>

  <div id="element1">
    <label for="your-name">Name: </label>
    <input id="inputElement1" type="text" name="your-name" id="" />
  </div>
</body>

function myFunction() {
        if (document.getElementById("element0").value === "test2" ) {
            document.getElementById("inputElement1").disabled=true;
        } else {
            document.getElementById("inputElement1").disabled=false;
        }
    }

Edit: Also changed from !0 to false on the else clause because !0 is true and probably not what you want.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 F. Müller
Solution 2
Solution 3

Related Questions