jquery - How to disable html form element with JavaScript?

There are two selection buttons which need client-side validation. The user must select one of them, and if user chooses one, the other one will be disabled automatically.

This my script:

<html>
   <head>
      <script type="text/javascript">
        function Check()  //this the funciton for diasbled
    {
      var x =document.getElementById("supexp1");
      var y =document.getElementById("supexp2");

      if(x.value != "")
      {
        document.form1.supexp2.disabled=true;
      }
      else if(y.value != "")
      {
        {
        document.form1.supexp1.disabled=true;
      }
      } 
    }

      </script>

   </head>
  <body>
    <form method="POST" action="destination.php" id="form1">
       <select name="SUPEXP" id="supexp1" data-native-menu="false" onChange="Check()">
           <option >Ekspedisi Local1</option>  //this selection 1 
           <option >Ekspedisi Local2</option>  //this selection 1 
           <option >Ekspedisi Local3</option>  //this selection 1

       </select>
    <select name="SUPEXP" id="supexp2" data-native-menu="false" onChange="Check2()">
           <option >Ekspedisi Expor2</option>  //this selection 2
           <option >Ekspedisi Expor2</option>  //this selection 2
           <option >Ekspedisi Expor2</option>  //this selection 2


    </select>
    </form>
  </body>
 </html>

I use the jquerymobile framework and selection connect to the database. That code (JavaScript) is not running.

There are two selection buttons which need client-side validation. The user must select one of them, and if user chooses one, the other one will be disabled automatically.

This my script:

<html>
   <head>
      <script type="text/javascript">
        function Check()  //this the funciton for diasbled
    {
      var x =document.getElementById("supexp1");
      var y =document.getElementById("supexp2");

      if(x.value != "")
      {
        document.form1.supexp2.disabled=true;
      }
      else if(y.value != "")
      {
        {
        document.form1.supexp1.disabled=true;
      }
      } 
    }

      </script>

   </head>
  <body>
    <form method="POST" action="destination.php" id="form1">
       <select name="SUPEXP" id="supexp1" data-native-menu="false" onChange="Check()">
           <option >Ekspedisi Local1</option>  //this selection 1 
           <option >Ekspedisi Local2</option>  //this selection 1 
           <option >Ekspedisi Local3</option>  //this selection 1

       </select>
    <select name="SUPEXP" id="supexp2" data-native-menu="false" onChange="Check2()">
           <option >Ekspedisi Expor2</option>  //this selection 2
           <option >Ekspedisi Expor2</option>  //this selection 2
           <option >Ekspedisi Expor2</option>  //this selection 2


    </select>
    </form>
  </body>
 </html>

I use the jquerymobile framework and selection connect to the database. That code (JavaScript) is not running.

Share Improve this question edited Aug 4, 2012 at 14:59 phant0m 16.9k6 gold badges51 silver badges84 bronze badges asked Jul 28, 2012 at 4:12 MudMan23 8213 gold badges10 silver badges17 bronze badges

1 Where did you import jquerymobile? – Larry Battle Commented Jul 28, 2012 at 4:15
@LarryBattle I impport the Jquery mobile between tag <head>..</head>, is there any problem? – MudMan23 Commented Jul 28, 2012 at 4:19

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

I hope this is what you trying to do based on your description here is a jsfiddle

   $(document).ready(function() {
      $('#supexp1').change(function() {
      $('#supexp2').attr("disabled" , "disabled")
      });
      $('#supexp2').change(function() {
      $('#supexp1').attr("disabled" , "disabled")
      });    
    });

Try this code

if(x.value != ""){
    document.getElementById("supexp2").disabled=true;
} else if(y.value != "") {
    document.getElementById("supexp1").disabled=true;
}

I guess to get the value of the selected item you need to use some thing like this

  var e = document.getElementById("supexp1");
  var x = e.options[e.selectedIndex].value;

instead of

  var x =document.getElementById("supexp1");

do the same for Y

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - How to disable html form element with JavaScript? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)