Question

我有一个带有几个选项的下拉菜单。我想循环遍历它们并支持其中一些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>

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

    });



}

结果，

我没有显示控制台的错误。但我一直看到我的下拉菜单没有被禁用，因为我想要它们。

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

Answer 1

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

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

Answer 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>

Answer 3

.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>

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

3 个答案: