How can I disabled select option(s) base on the JSON data got from AJAX?

Question

I have a dropdown-menu with a couple options. I want to loop through them and prop the disabled attribute on some of them base its result from the Ajax call.

This what I'm trying to achieve.

Sample Reportable Data

s-00591 | true
s-00592 | false
s-00593 | false
s-00594 | false
s-00595 | false

HTML

<select class="rn-dropdown" id="rn-dd">
    <option value="class-view">class view</option>
    <!-- Students Populate Here  -->
    <option value="s-00591">Student S00591</option>
    <option value="s-00592">Student S00592</option>
    <option value="s-00593">Student S00593</option>
    <option value="s-00594">Student S00594</option>
    <option value="s-00595">Student S00595</option>
</select>

JS

success: function(reportable) {



    $.each(reportable , function(i, v) {

        var userId = v.userId;
        var reportable = v.reportable;
        var currentVal = userId;

        console.log('start');
        console.log(userId + " | " +reportable);
        $('#rn-dd option[value="' + currentVal + '"]').prop('disabled', true);
        console.log('end');

    });



}

Result,

I got no error displaying the console. But I keep seeing my dropdown-menu is not disabled as I want them to.

Any hints / helps / suggestions will mean a lot to me.

try `.prop('disabled', 'disabled')` refer http://stackoverflow.com/questions/6961526/correct-value-for-disabled-attribute — Chaitanya Gadkari, Jul 27 '15 at 13:23
Simple check `console.log($('#rn-dd option[value="' + currentVal + '"]').length)` to see if selector is matching — charlietfl, Jul 27 '15 at 13:27
a boolean works just fine with `prop('disabled', boolean)` but it needs to be the boolean from the data — charlietfl, Jul 27 '15 at 13:28
@charlietfl : I got `0` when running your simple check suggestion. — code-8, Jul 27 '15 at 13:53
My dropdown-menu is auto populate base on AJAX as well. Is it because of my `prop disabled` is loading before the dropdown-menu is even populate. If so, how can I make sure make that they run in the properly order ? — code-8, Jul 27 '15 at 13:55
Well that ajax makes a huge difference and should have been mentioned in the beginning. Need to show how both ajax are integrated into the code and when they get triggered — charlietfl, Jul 27 '15 at 13:57
@charlietfl : I got it to work now by loading it in the proper order. :) I really appreciated your concern and time. — code-8, Jul 27 '15 at 14:07

score 1 · Answer 1 · answered Jul 27 '15 at 13:24

1

I am not sure but i think you should check value of currentVal in your code , is it giving value like s-00591 or not , becaues if you get wrong value there it doesnt disable option you want.

and try out .prop('disabled','disabled')

answered Jul 27 '15 at 13:24

Pranay Rana

175,020
35
237
263

Ronny · Answer 2 · 2015-07-27T13:33:00.290

The basic thing you're trying should work if you pass the needed value instead of true to prop('disabled', true), you just don't use what you know.

Here's a basic example, discarding AJAX and other things unrelated to the core of your question:

Code:

var users = [
  {userId: 's-00591', reportable: true},
  {userId: 's-00592', reportable: false},
  {userId: 's-00593', reportable: false},
  {userId: 's-00594', reportable: false},
  {userId: 's-00595', reportable: false},
];

$.each(users , function(index, user) {
  $('#rn-dd option[value="' + user.userId + '"]').prop('disabled', !user.reportable);
});

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
</head>
<body>
<select class="rn-dropdown" id="rn-dd">
    <option value="class-view">class view</option>
    <!-- Students Populate Here  -->
    <option value="s-00591">Student S00591</option>
    <option value="s-00592">Student S00592</option>
    <option value="s-00593">Student S00593</option>
    <option value="s-00594">Student S00594</option>
    <option value="s-00595">Student S00595</option>
</select>
</body>
</html>

Problem in code might be cause because of wrong value of variable userId which is used as part of selector — Pranay Rana, Jul 27 '15 at 13:26
You're right, revised my example code to reflect a more accurate representation of the question's data structure. Thanks. — Ronny, Jul 27 '15 at 13:30

fuyushimoya · Accepted Answer · 2015-07-27T13:43:39.583

.prop('disabled', true); I believe its a typo or something, as it disable every options.
The true, false value in your jsonObj may be String. So, no matter the value is 'true' or 'false', its treaded as true, so !reportable is always false, which means it won't disable any option.

You may have to check if its a string first, like :

reportable = (typeof v.reportable === 'string') ? v.reportable === 'true' : v.reportable

To convert it to Boolean first.

var reportable = [
  {userId: 's-00591', reportable: 'true'},
  {userId: 's-00592', reportable: 'false'},
  {userId: 's-00593', reportable: 'false'},
  {userId: 's-00594', reportable: 'false'},
  {userId: 's-00595', reportable: 'false'}
];

// Check the diff between string and boolean.
var reportable2 = [
  {userId: 's-00591', reportable:  true},
  {userId: 's-00592', reportable: false},
  {userId: 's-00593', reportable: false},
  {userId: 's-00594', reportable: false},
  {userId: 's-00595', reportable: false}
];



$.each(reportable , function(i, v) {
  var userId = v.userId;
  var reportable = v.reportable;
  var currentVal = userId;

  console.log('start');
  console.log(userId + " | " +reportable);
  $('#rn-dd option[value="' + currentVal + '"]').prop('disabled', !reportable);
  console.log('end');

});

$.each(reportable2 , function(i, v) {
  var userId = v.userId;
  var reportable = v.reportable;
  var currentVal = userId;

  console.log('start');
  console.log(userId + " | " +reportable);
  $('#rn-dd2 option[value="' + currentVal + '"]').prop('disabled', !reportable);
  console.log('end');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select class="rn-dropdown" id="rn-dd">
    <option value="class-view">class view</option>
    <!-- Students Populate Here  -->
    <option value="s-00591">Student S00591</option>
    <option value="s-00592">Student S00592</option>
    <option value="s-00593">Student S00593</option>
    <option value="s-00594">Student S00594</option>
    <option value="s-00595">Student S00595</option>
</select>

<select class="rn-dropdown" id="rn-dd2">
    <option value="class-view">class view</option>
    <!-- Students Populate Here  -->
    <option value="s-00591">Student S00591</option>
    <option value="s-00592">Student S00592</option>
    <option value="s-00593">Student S00593</option>
    <option value="s-00594">Student S00594</option>
    <option value="s-00595">Student S00595</option>
</select>

I really appreciated the snippet, and the precise answer. – code-8 Jul 27 '15 at 13:56 — code-8, Jul 27 '15 at 13:56

How can I disabled select option(s) base on the JSON data got from AJAX?

3 Answers3