Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

enter image description here

This what I'm trying to achieve.

enter image description here


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.

enter image description here

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

like image 801
code-8 Avatar asked Jul 27 '15 13:07

code-8


Video Answer


1 Answers

  1. .prop('disabled', true); I believe its a typo or something, as it disable every options.

  2. 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>
like image 67
fuyushimoya Avatar answered Oct 05 '22 23:10

fuyushimoya