[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

JQuery - enable / disable select base on radio value

Posted on 2014-07-13
5
Medium Priority
?
1,248 Views
Last Modified: 2014-07-13
Hi..
Based on a Radio button value I would like to disable/enable a SELECT.
If Radiobutton value is Yes, the the SELECT should be enabled if NO SELECt should be disabled.

  <input type="radio" name="Issue" value="Y"/>&nbsp;Yes
                    <br />
                    <br />
                    Error Code:     &nbsp;&nbsp;
                    <select name="ErrorCode" id="ErrorCode" style="width: 300px;">


Any ideas?
thx
0
Comment
Question by:JElster
  • 4
5 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40193062
You will want to have a "NO" radio button and start with that selected.  


Sample http://jsbin.com/siyeq/1
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
    $(function () {
    $('input[name="Issue"]').change(function () {
        $('#ErrorCode option').prop('disabled', false);
        var iVal = $('[name="Issue"]:checked').val();
        if (iVal === 'N') {
            $('#ErrorCode option').prop('disabled', 'disabled');
        }
    });
});
    </script>
  <meta charset="utf-8">
  <title>padas Q_28474764</title>
</head>
<body>
<input type="radio" name="Issue" value="Y"/>&nbsp;Yes
<input type="radio" name="Issue" value="N" Checked/>&nbsp;No  
                    <br />
                    <br />
                    Error Code:     &nbsp;&nbsp;
  <select name="ErrorCode" id="ErrorCode" style="width: 300px;">
    <option>something abc</option>
    <option>something 123</option>
    <option>something xyz</option>
  </select>
</body>
</html>

Open in new window

0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40193069
Use this one instead.  Above I forget to set the default to disable.

http://jsbin.com/siyeq/1/ 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
    $(function () {
      $('#ErrorCode option').prop('disabled', 'disabled');
    $('input[name="Issue"]').change(function () {
        $('#ErrorCode option').prop('disabled', false);
        var iVal = $('[name="Issue"]:checked').val();
        if (iVal === 'N') {
            $('#ErrorCode option').prop('disabled', 'disabled');
        }
    });
});
    </script>
  <meta charset="utf-8">
  <title>padas Q_28474764</title>
</head>
<body>
<input type="radio" name="Issue" value="Y"/>&nbsp;Yes
<input type="radio" name="Issue" value="N" Checked/>&nbsp;No  
                    <br />
                    <br />
                    Error Code:     &nbsp;&nbsp;
  <select name="ErrorCode" id="ErrorCode" style="width: 300px;">
    <option>something abc</option>
    <option>something 123</option>
    <option>something xyz</option>
  </select>
</body>
</html>

Open in new window

0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40193089
Bonus.  Let's add a message.  

http://jsbin.com/siyeq/2/
<!DOCTYPE html>
<html>
<head>
  <style>
    .red{color:red;}
    .blue{color:blue}
    </style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
    $(function () {
      $('#ErrorCode option').prop('disabled', 'disabled');
      msg(0)
    $('input[name="Issue"]').change(function () {
        $('#ErrorCode option').prop('disabled', false);
        var iVal = $('[name="Issue"]:checked').val();
        if (iVal === 'N') {
          msg(0)
           $('#ErrorCode option').prop('disabled', 'disabled');
        }else{
          msg(1)
        }
    });
      
     function msg(m){
       switch (m) {
    case 0:
        alert = "<span class='red'>Please Check Yes</span>";
        break;
    case 1:
        alert = "<span class='blue'>You May Now Make A Selection</span>";
        break;
    
       }
       $('#msg').html(alert);
     } 
});
    </script>
  <meta charset="utf-8">
  <title>padas Q_28474764</title>
</head>
<body>
<input type="radio" name="Issue" value="Y"/>&nbsp;Yes
<input type="radio" name="Issue" value="N" Checked/>&nbsp;No  
                    <br />
                    <br />
                    Error Code:     &nbsp;&nbsp;
  <select name="ErrorCode" id="ErrorCode" style="width: 300px;">
    <option>something abc</option>
    <option>something 123</option>
    <option>something xyz</option>
  </select>
  <div id="msg"></div>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:JElster
ID: 40193158
thx!
How can Reset the selection if they click No
0
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 40193172
http://jsbin.com/siyeq/3

<!DOCTYPE html>
<html>
<head>
  <style>
    .red{color:red;}
    .blue{color:blue}
    </style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
    $(function () {
      $('#ErrorCode option').prop('disabled', 'disabled');
      msg(0)
    $('input[name="Issue"]').change(function () {
        $('#ErrorCode option').prop('disabled', false);
        var iVal = $('[name="Issue"]:checked').val();
        if (iVal === 'N') {
          msg(0)
           $('#ErrorCode option').prop('disabled', 'disabled');
        }else{
          msg(1)
        }
    });
      
     function msg(m){
       switch (m) {
    case 0:
        $('#ErrorCode').val(0);   
        alert = "<span class='red'>Please Check Yes</span>";
        break;
    case 1:
        alert = "<span class='blue'>You May Now Make A Selection</span>";
        break;
    
       }
       $('#msg').html(alert);
     } 
});
    </script>
  <meta charset="utf-8">
  <title>padas Q_28474764</title>
</head>
<body>
<input type="radio" name="Issue" value="Y"/>&nbsp;Yes
<input type="radio" name="Issue" value="N" Checked/>&nbsp;No  
                    <br />
                    <br />
                    Error Code:     &nbsp;&nbsp;
  <select name="ErrorCode" id="ErrorCode" style="width: 300px;">
    <option value="0">Select</option>
    <option value="1">something abc</option>
    <option value="2">something 123</option>
    <option value="3">something xyz</option>
  </select>
  <div id="msg"></div>
</body>
</html>

Open in new window

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month17 days, 23 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question