Question

我做了以下示例来描述我的问题：

$("tr > td > #arm").on("click", function() {
  $(this).parent().children("#arm").prop("disabled", true);
  $(this).parent().children("#disarm").prop("disabled", false);
});

$("tr > td > #disarm").on("click", function() {
  $(this).parent().children("#arm").prop("disabled", false);
  $(this).parent().children("#disarm").prop("disabled", true);;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<table>
  <tr>
    <td>
      <button id="arm" disabled>Arm</button>
    </td>
    <td>
      <button id="disarm">Disarm</button>
    </td>
  </tr>
</table>

<script>
</script>

我有上面的table，其中一个row在每个cells中包含2 button和cell。其中一个是disabled所以我制作了一个脚本，当我按下第二个button时，它应该启用第一个并禁用被点击的那个。

禁用已点击的button按预期工作，但我不知道为什么它不启用其他button。

Answer 1

您不选择正确的元素。你的代码是

$(this).parent().children("#disarm")

其中$(this)是 #arm 元素，然后parent()是 td单元格。

所以基本上你正在寻找那个单元格的子元素（ #disarm ），这就是为什么他找不到它

尝试使用此

$("tr > td > #arm").on("click", function() {
    $(this).prop("disabled", true);
    $(this).closest("tr").find("#disarm").prop("disabled", false);
});

$("tr > td > #disarm").on("click", function() {
    $(this).closest("tr").find("#arm").prop("disabled", false);
    $(this).prop("disabled", true);
});

这是您代码的WORKING DEMO：）

Answer 2

您需要使用prev和next

$("tr > td > #arm").on("click", function() {
    $(this).parent().children("#arm").prop("disabled", true);
    $(this).parent().next().children("#disarm").prop("disabled", false);
});
$("tr > td > #disarm").on("click", function() {
    $(this).parent().prev().children("#arm").prop("disabled", false);
    $(this).parent().children("#disarm").prop("disabled", true);;
});

https://jsfiddle.net/hfr33exa/1/

Answer 3

尝试从元素中完全删除disable属性。据我所知，并非所有浏览器都能正常使用disable =＆＃34; false＆＃34;

Answer 4

你可以添加一个类，然后使用prop函数，如下所示

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <button id="arm" disabled class="test">Arm</button>
                </td>
                <td>
                    <button id="disarm" class="test">Disarm</button>
                </td>
            </tr>
        </table>

        <script>
        $('.test').click(function(){
            $(".test").prop('disabled', function () {
   return ! $(this).prop('disabled');
});
});
        </script>
    </body>
</html>

<强> DEMO

description ：我已经为所有按钮添加了一个类测试，然后我使用了prop函数。因此，发生单击事件的按钮被禁用，并且全部启用

Answer 5

以下是您的问题的解决方案。使用removeAttr删除对元素的禁用。

           <table>
            <tr>
                <td>
                    <button id="arm" disabled>Arm</button>
                </td>
                <td>
                    <button id="disarm">Disarm</button>
                </td>
            </tr>
        </table>

        <script>
            $("tr > td > #arm").on("click", function() {
                $("#arm").prop("disabled", true);
                $("#disarm").removeAttr("disabled");
            });

            $("tr > td > #disarm").on("click", function() {
               $("#arm").removeAttr("disabled");
               $("#disarm").prop("disabled", true);;
            }); 
        </script>

这是一个工作示例的jsfiddle

Answer 6

单击按钮时没有理由选择父级。

parseFloat()

应该只是

$(this).parent().children("#arm").prop("disabled", true);

现在，当你试图选择其他元素时，你会这样做。

您选择按钮的父级
您要查找该元素内的其他按钮。

问题是按钮是父母的兄弟。但是当你拥有id时，没有必要选择父母。只需按其ID开始选择它就会更快。

＆＃13;

$(this).prop("disabled", false);

＆＃13;

$("table tbody").on("click", "button", function() {
  var btn = $(this).prop("disabled", true);
  var  opposite = btn.attr("id") === "disarm" ? "#arm" : "#disarm";
  $(opposite).prop("disabled", false);
});

＆＃13;

更改属性不按预期工作

6 个答案: