如何根据从AJAX获取的JSON数据禁用选择选项？

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. 我想循环遍历它们并支持其中一些disabled属性基于Ajax调用的结果。

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 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 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. 任何提示/帮助/建议对我来说都意味着很多。

Answer 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. 我不确定，但我认为你应该在你的代码中检查currentVal值，它是否给出了像s-00591这样s-00591值，因为如果你得到错误的值，它就不会禁用你想要的选项。

and try out .prop('disabled','disabled') 并尝试.prop('disabled','disabled')

Answer 2

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. 如果您将所需的值传递给prop('disabled', true) ，那么您尝试的基本操作应该可以正常工作，您只是不使用您所知道的。

Here's a basic example, discarding AJAX and other things unrelated to the core of your question: 这是一个基本的例子，放弃了AJAX和其他与你的问题核心无关的东西：

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>

Answer 3

.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 . jsonObj中的true ， false值可能是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. 因此，无论值是'true'还是'false' ，它都被标记为true ，所以!reportable始终为false，这意味着它不会禁用任何选项。

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>

如何根据从AJAX获取的JSON数据禁用选择选项？

问题描述

3 个解决方案

解决方案1
1 2015-07-27 13:24:05

解决方案2
1 2015-07-27 13:24:14

解决方案3
1 已采纳 2015-07-27 13:31:24

如何根据从AJAX获取的JSON数据禁用选择选项？

问题描述

3 个解决方案

解决方案1 1 2015-07-27 13:24:05

解决方案2 1 2015-07-27 13:24:14

解决方案3 1 已采纳 2015-07-27 13:31:24

解决方案1
1 2015-07-27 13:24:05

解决方案2
1 2015-07-27 13:24:14

解决方案3
1 已采纳 2015-07-27 13:31:24