asked on

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"/> Yes
<br />
<br />
Error Code:   
<select name="ErrorCode" id="ErrorCode" style="width: 300px;">

Any ideas?
thx

Scott Fell

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

Scott Fell

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

Scott Fell

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

JElster

ASKER

thx!
How can Reset the selection if they click No

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial