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

【问题标题】：How can I disabled select option(s) base on the JSON data got from AJAX?如何根据从 AJAX 获得的 JSON 数据禁用选择选项？
【发布时间】：2015-10-17 16:46:45
【问题描述】：

我有一个带有几个选项的下拉菜单。我想遍历它们并在其中一些属性上支持 disabled 属性，其结果来自 Ajax 调用。

这就是我想要达到的目标。

可报告数据示例

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>

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');

    });



}

结果，

显示控制台没有错误。但我一直看到我的下拉菜单没有像我希望的那样被禁用。

任何提示/帮助/建议对我来说意义重大。

【问题讨论】：

试试.prop('disabled', 'disabled')参考stackoverflow.com/questions/6961526/…
我的想法和@ChaitanyaGadkari 一样。
简单检查console.log($('#rn-dd option[value="' + currentVal + '"]').length)，看看选择器是否匹配
布尔值与prop('disabled', boolean) 配合得很好，但它必须是数据中的布尔值
提供真实的示例数据，以便测试您的代码

标签： javascript jquery html ajax json

【解决方案1】：

.prop('disabled', true); 我认为是错字什么的，因为它禁用了所有选项。
您的 jsonObj 中的 true、false 值可能是 String。所以，无论是'true'还是'false'，它都被标记为true，所以!reportable总是false，也就是说它不会禁用任何选项。

你可能需要先检查它是否是一个字符串，比如：

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

首先将其转换为布尔值。

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>

【讨论】：

我非常感谢 sn-p 和准确的答案。

【解决方案2】：

如果您将所需的值而不是 true 传递给 prop('disabled', true)，那么您尝试的基本操作应该可以工作，您只是不使用您所知道的。

这是一个基本示例，丢弃 AJAX 和其他与问题核心无关的内容：

代码：

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>

【讨论】：

代码中的问题可能是因为用作选择器一部分的变量 userId 的值错误
你是对的，修改了我的示例代码以更准确地反映问题的数据结构。谢谢。

【解决方案3】：

我不确定，但我认为你应该在代码中检查 currentVal 的值，它是否给出了 s-00591 之类的值，因为如果你得到错误的值，它不会禁用你想要的选项。

试试.prop('disabled','disabled')

【讨论】：