Question

我有一个带有一列文本框的html表（里程），所有这些都在页面加载时被禁用，我需要在用户点击复选框时显示文本框应该启用该列并成为必填字段，然后如果用户取消选中该复选框，则必须禁用该行上的文本框并删除所需的类。 alt text

当用户点击相应的复选框时，我已经具有启用和禁用文本框（列里程）的功能，但它是用javascript编写的。但是，由于某种原因，它只能起作用在IE）。

这是html代码

<tbody>
 <c:forEach items="${list}" var="item">
    <tr>
      <td align="center">
         <input type="checkbox" name="selectItems" value="<c:out value="${item.numberPlate}"/>" onchange="enableTextField(this)" />
      </td>
      <td align="left"><c:out value="${item.numberPlate}"/></td>
      <td align="left"><c:out value="${item.driver.fullName}"/></td>
      <td align="left"><input type="text" name="mileage_<c:out value="${item.numberPlate}"/>" value="" disabled="true"/></td>
     </tr>
  </c:forEach>                       
</tbody>

和javascript代码：

function enableTextField(r)
    {   var node = r.parentNode;
        while( node && node.tagName !== 'TR' ) {
            node = node.parentNode;
        }
        var i=node.rowIndex;

        if(document.form1.selectItems[i-1].checked)
        {   

            document.getElementById('mileage_' + document.form1.selectItems[i-1].value).disabled=false;
        }
        else
        {

            document.getElementById('mileage_' + document.form1.selectItems[i-1].value).value="";
            document.getElementById('mileage_' + document.form1.selectItems[i-1].value).disabled=true;
        }


    }

现在，我知道为了添加或删除动态验证规则，我必须使用：addClass（'required'）; o removeClass（'required'），但我不知道如何检测是否选中了复选框，并基于此，启用或禁用该行的文本框。

我真的希望你可以帮我解决这个问题。

Answer 1

将其放在<head>或.js中包含的<head>文件中。

$(document).ready(function() {
    $("input[name=selectItems]").change(function() {
        $(this).closest("tr").find("input[name^=mileage]").attr("disabled", !this.checked);
    });
});

Here's a live demo

Answer 2

要检查是否在jquery中选中了复选框，你会$('#CHECKBOX_ID').is(':checked')返回一个可以在if语句中使用的布尔值

Answer 3

在复选框中添加一个id，通过id调用复选框，然后检查复选框的布尔值。

<!DOCTYPE html>  
<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<input id="sam" type="checkbox" name="vehicle" value="Bike" />
</body>
</html>

这将返回true / false

$('#sam').is(':checked')

Answer 4

这样的事情应该有效：

$("input[name='selectItems']").change(function() {

    var $el = $(this);

    if(this.checked) {
        // checkbox checked.
        $el.parents("tr").find("input[name^='mileage_']").atrr("enabled", "enabled");
    } else if(!this.checked) {
        // checkbox NOT checked.
        $el.parents("tr").find("input[name^='mileage_']").atrr("disabled", "disabled");
    }

});

如何检查是否使用jquery检查复选框数组中的复选框

4 个答案: