jQuery - Как удалитьПрименение при смене флажка?

Question

У меня есть флажок, который я использую для переключения, если поле ввода «требуется» с помощью jQuery. Это часть проверки достоверности Foundation Abide. Итак, в конце поля ввода необходимо добавить/удалить слово «требуется».

По умолчанию флажок установлен. Когда пользователь снимает флажок, он добавляет «требуется» к входу, как и следовало бы (else if). Однако, если вы перепроверите окно, «removeProp» не удалит «required». Что я делаю неправильно? Я пробовал функции prop и attr с тем же результатом.

<input type="checkbox" id="billing" checked> 

<input type="text" id="b_name" pattern="alpha" required> 


$('#billing').change(function() { 

    // Same as Shipping Address 
    if ($(this).is(':checked')) { 
     $('#b_name').removeProp('required'); 
    } 
    else if (!$(this).is(':checked')) { 
     $('#b_name').prop('required', true); 
    } 

    }); 

Answer 1

Попробуйте это:

$('#billing').change(function() { 

    // Same as Shipping Address 
    if ($(this).is(':checked')) { 
     $('#b_name').prop('required', false); 
    } 
    else { 
     $('#b_name').prop('required', true); 
    } 

    }); 

Answer 2

Вы можете ясно видеть поведение там. После удаления свойства он не добавляет свойство обратно.

Вы можете увидеть тот же случай, упомянутый в Jquery docs for .removeProp().

Как говорится -

Примечание: Не используйте этот метод, чтобы удалить нативные свойства, такие как проверено, отключено или выбран. Это полностью удалит свойство и, после удаления, не может быть добавлено снова элементу. Используйте .prop(), чтобы вместо этого установить эти свойства в false.

Таким образом, вы можете установить его ложным и истинным на проверку и снимите флажок, а не удаляя свойство укомплектовать

$('#billing').change(function() { 
 

 
    // Same as Shipping Address 
 
    if ($(this).is(':checked')) { 
 
     $('#b_name').prop('required', false); 
 
    } 
 
    else if (!$(this).is(':checked')) { 
 
     $('#b_name').prop('required', true); 
 
    } 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" id="billing" checked> 
 

 
<input type="text" id="b_name" pattern="alpha" required>