Question

我正在尝试将按钮的类更改为禁用，如果文本在另一个元素中包含ACTIVE。由于某种原因，它不起作用。我已经查看了一些变体，但无法弄清楚我要去哪里。

$(document).ready(function () {
    var isactive = document.getElementById('userStatus');
    if (isactive.text() == "ACTIVE") {
        $("#addactionbutton").addClass('disabled');
    }
});

HTML代码：

<td id="userStatus">@Html.DisplayFor(m => item.UserStatus)</td>

<td>
                    <button id="addactionbutton" type="button" class="addactionbutton btn btn-outline-primary" orguid="@item.Uid" title="Add User to Organization" orgname="@item.Name" isipaas="@item.IsIpassOrg.ToString()" userid="@item.UserId" orgid="@item.Id"><i class="fas fa-plus-circle"></i></button>
                    <button type="button" class="removeactionbutton btn btn-outline-danger" userid="@item.UserId" title="Remove User from Organization" orgid="@item.Id" orguid="@item.Uid" isipaas="@item.IsIpassOrg"><i class="fas fa-minus-circle"></i></button>
                    <button id="unlockUser" type="button" class="unlockactionbutton btn btn-outline-primary" orguid="@item.Uid" title="Unlock Account" orgname="@item.Name" isipaas="@item.IsIpassOrg.ToString()" userid="@item.UserId" orgid="@item.Id"><i class="fas fa-unlock-alt"></i></button>
                </td>

Answer 1

请尝试在下面提到的代码中检查活动字符串。

if($("#userStatus").html().indexOf('ACTIVE') == -1){
 $("#addactionbutton").addClass('disabled');
}

Answer 2

这里有两个问题。首先，您将普通的JS方法与jQuery混合在一起。 isactive将包含一个Element对象，而不是jQuery对象，因此在该对象上调用text()将给您一个错误。其次，您提供的参数上getElementById()不需要#前缀。

您可以通过使用jQuery本身来选择#userStatus元素来解决这两个问题，如下所示：

var $isActive = $('#userStatus')
if ($isActive.text().trim() == "ACTIVE") {
  $("#addactionbutton").addClass('disabled');
}

.disabled {
  color: #CCC;
  background-color: #AAA;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="userStatus">ACTIVE</div>
<button id="addactionbutton">Add action</button>

或者，如果您只想使用纯JS：

var isActive = document.querySelector('#userStatus');
if (isActive.innerText.trim() === 'ACTIVE') {
  document.querySelector('#addactionbutton').classList.add('disabled');
}

.disabled {
  color: #CCC;
  background-color: #AAA;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="userStatus">ACTIVE</div>
<button id="addactionbutton">Add action</button>

要注意的最后一件事是，向元素添加disabled类仍然可以单击它。如果您不想要此功能，请将disabled属性也设置为true。

Answer 3

执行以下操作：

$(document).ready(function() {
  if ($('#userStatus').text().trim() == "ACTIVE") {
    $("#addactionbutton").addClass('disabled');
  }
});

.disabled {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <p>I am sample dom</p>
  <p id="userStatus">ACTIVE</p>
  <button id="addactionbutton">I am Button</button>
</div>

如果元素包含特定文本，则将类添加到Button

3 个答案: