Question

我遇到的问题是我的JQuery检查事件似乎只运行一次。我的目标是在选中相应的复选框时启用文本框。以下是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>

这是JQuery：

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);
    }
}

我是JQuery的新手，不知道为什么这不起作用。 “Forename”工作正常但“Surname”却没有。这是代码的JSFiddle。奇怪的是它在JSFiddle上根本不起作用。同样值得注意的是，我也在使用自助游戏。

如果有人可以提供帮助，我们将不胜感激！

Answer 1

我会分别处理每个元素。

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

Answer 2

最好在你的情况下单独处理每个元素。这是代码：

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

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

这是更新的JSFiddle

<强>更新

我刚刚尝试了以下代码（不是在JSFiddle中，只是在一个普通的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>

由于代码的加载方式，它似乎无法在JSFiddle中运行。它给出了以下JavaScript错误：

未捕获的ReferenceError：未定义valueChanged

如果您查看JSFiddle输出的来源，您会看到JavaScript代码包含在window.onload=function(){中，这可能会导致问题。

Answer 3

你的代码太复杂了。将onchange="valueChanged()"替换为onchange="valueChanged(this)"并使用此javascript：

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

结果：

＆＃13;

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

＆＃13;

<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(this)"> 
            <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(this)"> 
            <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>

＆＃13;

Answer 4

虽然我们无法回答＆＃34;为什么我的代码无法正常运行，＆＃34;由于您的问题中的代码显然与您尝试键入¹的代码不同，因此我想提供一个简单的JavaScript替代发布的解决方案。

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

这取决于复选框id与其关联的<input />元素的关系。 id（虽然下面是一个替代方法，它使用了HTML的结构）：

// 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);
});

＆＃13;

function changeToggle() {
  var checkbox = this,
    id = checkbox.id.replace('Check', ''),
    input = document.getElementById(id);

  input.disabled = !checkbox.checked;

}

var checkboxes = document.querySelectorAll('.row input[type=checkbox]');

Array.prototype.forEach.call(checkboxes, function(check) {
  check.addEventListener('change', changeToggle);
});

＆＃13;

<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" />
      <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" />
      <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>

＆＃13;

要使用HTML结构，尤其是关联的<label>的{{1}}是复选框的下一个元素兄弟：

<input />

＆＃13;

function changeToggle() {
  var checkbox = this,
      // retrieving the nextElementSibling (the first
      // element that follows as a sibling, rather than
      // nextSibling, which includes comment, and text,
      // nodes):
      label = checkbox.nextElementSibling,
      // accessing the HTMLLabelElement's htmlFor
      // property, to retrieve the string from its
      // 'for' attribute (getAttribute('for') would
      // also work):
      id = label.htmlFor,
      input = document.getElementById(id);

  // as above:
  input.disabled = !checkbox.checked;

}

＆＃13;

function changeToggle() {
  var checkbox = this,
    label = checkbox.nextElementSibling,
    id = label.htmlFor,
    input = document.getElementById(id);

  input.disabled = !checkbox.checked;

}

var checkboxes = document.querySelectorAll('.row input[type=checkbox]');

Array.prototype.forEach.call(checkboxes, function(check) {
  check.addEventListener('change', changeToggle);
});

＆＃13;

参考文献：

脚注：

您的评论，在问题的下方，针对Pointy：

@Pointy感谢你指出这一点。我没有看到那里。文本编辑器必须在我输入时自动将它们放在那里。

Source

JQuery检查事件只工作一次

4 个答案:

结果：