Невозможно удалить свойство только для чтения при нажатии флажка с помощью jquery

В таблице у меня есть первый элемент как флажок, а остальные как текстовое поле в каждой строке. Первоначально я хочу оставить все текстовые поля доступными только для чтения и сделать их редактируемыми, когда установлен соответствующий флажок. Ниже приведен код, который я использую, и он не работает, пожалуйста, предложите.

<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($('input:checkbox').prop('checked'))
    {
        $(this).parent().nextAll().find('input').prop('readOnly', false);
        $(this).parent().nextAll().find('input').css('background-color','#FFFFFF');
    }
Источник

3 ответа

Решение

В этом операторе if вы присвоили значение для prop. это ошибка

менять

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

в

if ($(this).prop('checked')) {

сценарий быть

$(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') вернет истину или ложь

Попробуй это

    $(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');
        }
    });
});

DEMO

Источник

Я бы лично предложил следующий подход:

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

JS Fiddle demo.

Рекомендации:

Источник
Другие вопросы по тегам