我做了以下示例来描述我的问题:
$("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
。
答案 0 :(得分: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:)
答案 1 :(得分:1)
您需要使用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);;
});
答案 2 :(得分:0)
尝试从元素中完全删除disable属性。据我所知,并非所有浏览器都能正常使用disable =&#34; false&#34;
答案 3 :(得分:0)
你可以添加一个类,然后使用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函数。因此,发生单击事件的按钮被禁用,并且全部启用
答案 4 :(得分:0)
以下是您的问题的解决方案。使用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
答案 5 :(得分:0)
单击按钮时没有理由选择父级。
parseFloat()
应该只是
$(this).parent().children("#arm").prop("disabled", true);
现在,当你试图选择其他元素时,你会这样做。
问题是按钮是父母的兄弟。但是当你拥有id时,没有必要选择父母。只需按其ID开始选择它就会更快。
$(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;