使用jquery单击复选框时无法删除只读属性_Jquery_Checkbox

使用jquery单击复选框时无法删除只读属性

jquery checkbox

使用jquery单击复选框时无法删除只读属性,jquery,checkbox,Jquery,Checkbox,在一个表中，每行的第一个元素是checkbox，其余元素是textbox。最初，我希望保持所有文本框为只读，并希望在单击CorroResponding复选框时使其可编辑。下面是我正在使用的代码，它不工作，请建议 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $

在一个表中，每行的第一个元素是checkbox，其余元素是textbox。最初，我希望保持所有文本框为只读，并希望在单击CorroResponding复选框时使其可编辑。下面是我正在使用的代码，它不工作，请建议

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){
    $('input:text').prop('readOnly',true);

    $('input:checkbox').on('click',function(){
        if($('this').prop('checked',true));
        {
            $('this').parent().nextAll().find('input').prop('readOnly',false);
        }

        else
        {
            $('this').parent().nextAll().find('input').prop('readOnly',true);
        }
    });
 });
</script>
</head>
<body>
<table border="1">

<tr>
<td><input type="checkbox"></td>
<td id="A7x1_1"><input type="text"></td>
<td id="A7x2_1"><input type="text"></td>
</tr>

<tr>
<td><input type="checkbox"></td>
<td id="A7x1_2"><input type="text"></td>
<td id="A7x2_2"><input type="text"></td>
</tr>

<tr>
<td><input type="checkbox"></td>
<td id="A7x1_3"><input type="text"></td>
<td id="A7x2_3"><input type="text"></td>
</tr>

</table>
</body>
</html>

在此if语句中，您为prop指定了值。这是个错误

改变

if ($(this).prop('checked' , true ))

到

脚本be

$(document).ready(function () {
    $('input:text').prop('readOnly', true);

    $('input:checkbox').on('click', function () {
        if ($(this).prop('checked')) {
            $(this).parent().nextAll().find('input').prop('readOnly', false);
        } else {
            $(this).parent().nextAll().find('input').prop('readOnly', true);
        }
    });
});

$（this）.prop（'checked'）

将返回true或false

试试这个

    $(document).ready(function () {
    $('input:text').prop('readOnly', true);
    $('input:text').css('background-color', '#C0C0C0');
    $('input:checkbox').each(function () {
        if ($(this).prop('checked')) {
            $(this).parent().nextAll().find('input').prop('readOnly', false).css('background-color', '#FFFFFF');
        }
    });
    $('input:checkbox').on('click', function () {
        if ($(this).prop('checked')) {
            $(this).parent().nextAll().find('input').prop('readOnly', false).css('background-color', '#FFFFFF');
        } else {
            $(this).parent().nextAll().find('input').prop('readOnly', true).val('').css('background-color', '#C0C0C0');
        }
    });
});

我个人建议采用以下方法：

// find all input elements whose type is equal to 'checkbox', bind a change
// event handler:
$('input[type="checkbox"]').change(function () {
    // move from the changed checkbox to the closest 'td' ancestor,
    $(this).closest('td')
    // select its sibling ('td') elements:
    .siblings()
    // find the 'input' elements:
    .find('input')
    // set the readonly property to false (if the checkbox is checked),
    // or to true, if the checkbox is not checked:
    .prop('readOnly', !this.checked);
// trigger the change-event-handler on page-load/DOMReady:
}).change();

参考资料：

我正在使用下面的代码，但它不起作用$（document）.ready（function（）{$（'input:text'）.prop（'readOnly'，true）；$（'input:checkbox'）.on（'click'，function（）{if（$（this.prop（$）.checked'，true））；{$（this.parent（）.nextAll（）.nextAll（）.find（'input'））；}其他{$（this.parent（）.nextAll（）.find（'input'）.prop（'readOnly'，true）；}）；查看更新答案上述代码有相同的错误，而不是将代码粘贴到您的注释中并说“它不工作”-只需告诉我们它以什么方式不工作，出了什么问题？什么是它不应该做的，什么是它不应该做的？我用同样的方法，但它不适合我$（文档）。ready（函数（）{$（'input:text'）.prop（'readOnly'，true）；$（'input:checkbox'）。on（'click'，function（）{if（$（this.prop（'checked'，true））；{$（this.parent（）.nextAll（））。find（'input'）。removeProp（'readOnly'）；}else{$（this.parent（）.nextAll（）.find（'input'）.prop（'readOnly'，true）；}}}}）；@user2866314您发布的代码有错误，请使用我的上述代码。上述代码对我有效，我唯一要做的是检查页面加载中是否有已选中的复选框。并且不想使其相应的文本框为只读。这应该已经做到了，这就是为什么我们触发

更改（）

事件，以便评估复选框的页面加载状态。

    $(document).ready(function () {
    $('input:text').prop('readOnly', true);
    $('input:text').css('background-color', '#C0C0C0');
    $('input:checkbox').each(function () {
        if ($(this).prop('checked')) {
            $(this).parent().nextAll().find('input').prop('readOnly', false).css('background-color', '#FFFFFF');
        }
    });
    $('input:checkbox').on('click', function () {
        if ($(this).prop('checked')) {
            $(this).parent().nextAll().find('input').prop('readOnly', false).css('background-color', '#FFFFFF');
        } else {
            $(this).parent().nextAll().find('input').prop('readOnly', true).val('').css('background-color', '#C0C0C0');
        }
    });
});

// find all input elements whose type is equal to 'checkbox', bind a change
// event handler:
$('input[type="checkbox"]').change(function () {
    // move from the changed checkbox to the closest 'td' ancestor,
    $(this).closest('td')
    // select its sibling ('td') elements:
    .siblings()
    // find the 'input' elements:
    .find('input')
    // set the readonly property to false (if the checkbox is checked),
    // or to true, if the checkbox is not checked:
    .prop('readOnly', !this.checked);
// trigger the change-event-handler on page-load/DOMReady:
}).change();