JQuery 和复选框

Question

我在使用 Jquery 和复选框时遇到问题。 例如，我有这个：

<input type="checkbox" name="guest" value="1" />
<input type="checkbox" name="guest" value="2" />
<input type="checkbox" name="guest" value="3" />

<input type="text" id="player-1" />
<input type="text" id="player-2" />
<input type="text" id="player-3" />

我的问题以及我一直在寻找的问题是如何使用 JQuery 禁用输入[type=text]。

这是我的代码：

<script>
$("input").on("click", function() {
var i = $("input:checked").val();
if(this.checked)
$("#player-"+i).attr("disabled", "disabled");
else
$("#player-"+i).removeAttr("disabled");
});
</script>

可能有什么错误我没有得到，但是当我点击一个复选框时，它会禁用第一个文本，如果我取消选中它，在我选中另一个之前什么都不会发生。

感谢您的宝贵时间！！！

Answer 1

你需要

 var i = $(this).val();

代替

var i = $("input:checked").val();

Live Demo

$("input").on("click", function () {
    var i = $(this).val();
    if (this.checked) $("#player-" + i).attr("disabled", "disabled");
    else $("#player-" + i).removeAttr("disabled");
});

Answer 2

您可以使用jQuery prop 方法启用/禁用您的输入：

$("input").prop('disabled', true);
$("input").prop('disabled', false);

你的例子：

$("#player-" + i).prop('disabled', this.checked);

Answer 3

问题出在这一行的$("input:checked").val()。

把这个改成，

$("input").on("click", function () {
    var i = $(this).val();
    if (this.checked) 
        $("#player-" + i).attr("disabled", "disabled");
    else 
        $("#player-" + i).removeAttr("disabled");
});

因为它只有在被选中时才会有价值。当您取消选中该复选框时，它将显示 undefined。