The checkbox does not want to disable the enable disable field

Question

I have a checkbox and a box. By default, the field should be disabled. Once the check box is checked, the field should turn on.

I tried literally every answer here, but no luck. I tried only css, but I couldn't either. When I try to use some samples in a violin or elsewhere, they work, but they do not in my project.

I currently have a simple test: when I click a button, the #clickerfield disables / enables. This works great. Therefore, I know my work with JavaScript, so I do not need any additional libraries. Now I just need to configure my code to work when the checkbox is checked or not.

This is what I have;

<script type="text/javascript">
$().ready(function() {
    $('#clicker').click(function() {
        $('#form_secondApprover').each(function() {
            if ($(this).attr('disabled')) {
                $(this).removeAttr('disabled');
            }
            else {
                $(this).attr({
                    'disabled': 'disabled'
                });
            }
        });
    });
});

Answer 1

javaScript !!

document.addEventListener("DOMContentLoaded", function(event) {
    var checkbox = document.getElementById('clicker');
    var inputs = document.querySelectorAll('input[type=text]');
    checkbox.addEventListener('change', function(event) {
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].disabled = !checkbox.checked;
        }
    });
});

input[type="text"]:disabled {
  cursor: not-allowed;
}

<input type="checkbox" id="clicker" />
<label for="clicker">Click Me, I'll disable/enable these text boxes</label>

<form id="form_secondApprover">
  <input type="text" disabled/>
  <input type="text" disabled/>
  <input type="text" disabled/>
</form>

Hide result

FIDDLE, :)

Answer 2

JS:

document.getElementById("clicker").addEventListener("change",function(event){
     if(event.target.checked)
        document.getElementById("field").removeAttribute("disabled");
     else
        document.getElementById("field").setAttribute("disabled","disabled");
});

HTML:

 <input type="checkbox" id="clicker" />
 <input type="text" id="field" disabled>

Answer 3

change() , disabled, .

. disabled , , readonly.

, .

---

$().ready(function() {
  $('#checkbox').on('change', function() {
    if ($('#field').attr('disabled')) {
      $('#field').removeAttr('disabled');
    }else {
      $('#field').attr({'disabled': 'disabled'});
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' name="checkbox1" id="checkbox" />Enable
<br>
<input type='text' name="text1" id="field" disabled/>

Hide result

Answer 4

jQuery .disabled .checked.

- ? https://jsfiddle.net/9rn9L1r9/1/