Javascript JQuery检查的事件只工作一次

我遇到的问题是，我的jquerychecked事件似乎只工作一次。我的目标是在选中相应的复选框时启用文本框。以下是HTML的简化版本：

<div class="row">
    <div class="form-group">
        <div class="col-lg-3 col-md-3 col-xs-3">
            <input type="checkbox" class="" id="forenameCheck" name="forenameCheck" onchange="valueChanged()"> 
            <label for="forename" class="control-label">Forename</label>
        </div>
        <div class="col-lg-7 col-md-7 col-xs-7">
            <input type="text" class="form-control" id="forename" disabled name="forename" placeholder="Forename">
        </div>
    </div>
</div>

<div class="row">
    <div class="form-group">
        <div class="col-lg-3 col-md-3 col-xs-3">
            <input type="checkbox" class="" id="surnameCheck" name="surnameCheck" onchange="valueChanged()"> 
            <label for="surname" class="control-label">Surname</label>
        </div>
        <div class="col-lg-7 col-md-7 col-xs-7">
            <input type="text" class="form-control" id="surname" disabled name="surname" placeholder="Surname">
        </div>
    </div>
</div>

// re-naming the function according what it does, this is
// entirely personal, so change, or revert, according to taste:
function changeToggle() {
  // the changed check-box ('this' is passed in
  // via the use of addEventListener(), later:
  var checkbox = this,
      // replacing the 'Check' from the element's id
      // with an empty string (to get the id of the 
      // associated <input />:
      id = checkbox.id.replace('Check', ''),
      // retrieving the associated <input />:
      input = document.getElementById(id);

  // updating the disabled property of the <input />,
  // to be the opposite of the checked state of
  // the check-box:
  input.disabled = !checkbox.checked;

}

// retrieving all <input /> elements that are descendants of
// an element with the class of 'row':
var checkboxes = document.querySelectorAll('.row input[type=checkbox]');

// using Array.prototype.forEach, and Function.prototype.call,
// to iterate over the NodeList returned by querySelectorAll():    
Array.prototype.forEach.call(checkboxes, function(check) {
  // check is the array-element of the array we're currently
  // iterating, in this case the check-box nodes; here we're
  // binding a change event-handler, naming the function
  // created earlier:
  check.addEventListener('change', changeToggle);
});

我对JQuery非常陌生，不知道为什么它不起作用。“姓”可以，但“姓”不行。这是代码的第一部分。奇怪的是，它在JSFIDLE上根本不起作用。同样值得注意的是，我也在使用bootstrap

---

如果有人能帮忙，我们将不胜感激

我将分别处理每个元素

$("#forenameCheck").change(function() {
    var isDisabled = !$(this).is(":checked");
    $("#forename").prop("disabled", isDisabled);
});

---

你的代码太复杂了。将

onchange=“valueChanged（）”

替换为

onchange=“valueChanged（this）”

并使用以下javascript：

function valueChanged(button) {
     button.parentNode.nextElementSibling.childNodes[1].disabled=!button.checked;
}

结果:

功能值已更改（按钮）{
button.parentNode.nextElementSibling.childNodes[1]。已禁用=！button.checked；
}

名字
姓

在您的案例中，最好分别处理每个元素。代码如下：

$("#forenameCheck").change(function() {
    var isDisabled = !$(this).is(":checked");
    $("#forename").prop("disabled", isDisabled);
});

$("#surnameCheck").change(function() {
    var isDisabled = !$(this).is(":checked");
    $("#surname").prop("disabled", isDisabled);
});

以下是最新的

更新

我只是尝试了下面的代码（不是在JSFIDLE中，只是在一个普通的html文件中），它可以工作

<script type='text/javascript' src='http://code.jquery.com/jquery-compat-git.js'></script>
<script>
function valueChanged()
{
    if($("#forenameCheck").is(":checked")){
        $("#forename").prop("disabled",false);
    }
    else{
        $("#forename").prop("disabled",true);
    }


    if($("#surnameCheck").is(":checked")){
        $("#surname").prop("disabled",false);
    }
    else{
        $("#surname").prop("disabled",true);
    }
}
</script>
<div class="row">
    <div class="form-group">
        <div class="col-lg-3 col-md-3 col-xs-3">
            <input type="checkbox" class="" id="forenameCheck" name="forenameCheck" onchange="valueChanged()"> 
            <label for="forename" class="control-label">Forename</label>
        </div>
        <div class="col-lg-7 col-md-7 col-xs-7">
            <input type="text" class="form-control" id="forename" disabled name="forename" placeholder="Forename">
        </div>
    </div>
</div>

<div class="row">
    <div class="form-group">
        <div class="col-lg-3 col-md-3 col-xs-3">
            <input type="checkbox" class="" id="surnameCheck" name="surnameCheck" onchange="valueChanged()"> 
            <label for="surname" class="control-label">Surname</label>
        </div>
        <div class="col-lg-7 col-md-7 col-xs-7">
            <input type="text" class="form-control" id="surname" disabled name="surname" placeholder="Surname">
        </div>
    </div>
</div>

函数值已更改（）
{
如果（$（“#forenameCheck”）。是（“：checked”））{
$（#forename”）.prop（“禁用”，false）；
}
否则{
$（“#forename”）.prop（“disabled”，true）；
}
如果（$（“#姓氏检查”）。是（“：检查”））{
$（“姓氏”）.prop（“残疾”，假）；
}
否则{
$（“#姓”）.prop（“残疾”，真）；
}
}
名字
姓

由于代码是如何加载到JSFiddle中的，因此它在JSFiddle中似乎不起作用。它给出了以下JavaScript错误：

未捕获引用错误：未定义valueChanged

---

如果查看JSFIDLE输出的源代码，您将看到JavaScript代码被包装在

窗口中。onload=function（）{

，这可能会导致问题。

虽然我们无法回答“为什么我的代码不工作”的问题由于您问题中的代码显然与您尝试键入1的代码不同，因此我想提供一个简单的纯JavaScript替代方案来替代发布的解决方案

这种方法使用JavaScript本身绑定事件处理程序，以便于将来的维护（因为它避免了必须搜索HTML来更新函数调用）并将相同的函数应用于每个复选框。这种方法允许相同的函数处理每个复选框的更改事件，而不是将更改事件处理程序单独绑定到页面上的每个复选框元素，这是不必要的重复（并会迅速扩大文档大小）

这取决于复选框

id

s与其关联的

元素

id

之间的关系（尽管下面发布了一个使用HTML结构的替代方案）：

名字
姓

在JSFiddle中，Jquery库未加载。它在JSFiddle中不起作用，因为您没有加载Jquery。在Jquery调用结束时设置“禁用”的那些属性不正确，将导致错误。如果您检查开发人员控制台，您将看到。检查此-@ArifulHaque谢谢。我对JSFiddle:PThanks也很陌生！它可以工作：）我只是想知道为什么它不能按我的方式工作？（使用onchange等）。我刚刚尝试了您的代码，如果您删除

（）

在jQuery调用结束时。它在JSFiddle中不起作用，可能是因为JSFiddle加载代码的方式。在JSFiddle中，您会遇到一个JavaScript错误：

未捕获引用错误：未定义valueChanged

@Nicael:如果您觉得答案太复杂，请随意否决，或者，理想情况下，解释复杂性和错误为什么这是一个问题。汤姆：为了解释为什么它不能按你的方式工作，我们需要查看你的代码（没有多余的“自动插入”参数）。你能将代码复制并粘贴到你的问题中吗？因为你似乎接受了一个不回答你试图问的问题的答案（当然，这是你的特权）。看来你的代码也有效，我用更多细节更新了我的答案。很好地复制并粘贴到我的答案上。请不要为此使用jQuery，

！$（这）。是（

：checked'））

？为什么不直接使用DOM:

！this.checked`，它在每个浏览器中都可用，不需要使用库，而且速度更快/更便宜，因为它不需要库并返回相同的布尔值。

// re-naming the function according what it does, this is
// entirely personal, so change, or revert, according to taste:
function changeToggle() {
  // the changed check-box ('this' is passed in
  // via the use of addEventListener(), later:
  var checkbox = this,
      // replacing the 'Check' from the element's id
      // with an empty string (to get the id of the 
      // associated <input />:
      id = checkbox.id.replace('Check', ''),
      // retrieving the associated <input />:
      input = document.getElementById(id);

  // updating the disabled property of the <input />,
  // to be the opposite of the checked state of
  // the check-box:
  input.disabled = !checkbox.checked;

}

// retrieving all <input /> elements that are descendants of
// an element with the class of 'row':
var checkboxes = document.querySelectorAll('.row input[type=checkbox]');

// using Array.prototype.forEach, and Function.prototype.call,
// to iterate over the NodeList returned by querySelectorAll():    
Array.prototype.forEach.call(checkboxes, function(check) {
  // check is the array-element of the array we're currently
  // iterating, in this case the check-box nodes; here we're
  // binding a change event-handler, naming the function
  // created earlier:
  check.addEventListener('change', changeToggle);
});