Disable element if select element have value-CodePudding

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>

"Quick view" at https://jsfiddle.net/doLau1h2/

CodePudding user response：

First, the comparison operator should be "===", not "=". Secondly, you should disable the input element, not the whole div(obviously, you can't do so)

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

<meta name="color-scheme" content="dark light" />
<body onl oad="myFunction()" oninput="myFunction()" style="zoom: 225%">
    
  <select name="" id="element0">
    <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>

  <script>
    function myFunction() {
        if (document.getElementById("element0").value = "test2" ) {
            document.getElementById("element1").disabled=true;
        } else {
            document.getElementById("element1").disabled=!0;
        }
    }
  </script>
</body>

CodePudding user response：

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.

CodePudding user response：

try adding the function to the onchange event listener to the select element

<select name="" id="element0" onchange="myFunction()">
   <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>

and in js

document.querySelector("select").addEventListener("change", myFunction)
function myFunction() {
   if (document.getElementById("element0").value = "test2") {
     document.querySelectorAll("#element1 > input").forEach(input => {
         input.disable = "true"
     }
   } else {
     document.querySelectorAll("#element1 > input").forEach(input => {
         input.disable = "false"
     }
   }
}