JQuery - enable / disable select base on radio value

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
LVL 1
JElsterAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
JElsterAuthor Commented:
thx!
How can Reset the selection if they click No
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.