Jquery prop.("disabled",true) not working [closed]

Question

I am doing a simple disabling and enabling of checkbox based on the status of another checkbox. I am having trouble disabling the checkbox by using prop("disabled", true). But It is not working. I tried using the prop("checked", true) and it works well. I don't why prop("disabled", true) is not working.

HTML:

<div class="form-group question-option-block form-group">
    <label for="option[]" class="control-label">Options</label>    
    <div class="row" style="">
       <div class="col-xs-5 col-md-8"><input class="form-control question-option" name="option[]" type="text" value="0" id="option[]"></div>
       <div class="col-xs-2 col-md-1"><input type="checkbox" class="open_ended_answers" name="open_ended_answers[]" value="1"> Open-ended </div>
       <div class=" col-xs-2 col-md-1"> <input type="checkbox" class="required_open_answers" name="required_open_answers[]" value="1"> Required</div>
    </div>
    <div class="row" style="margin-top:20px;">
       <div class="col-xs-5 col-md-8"><input class="form-control question-option" name="option[]" type="text" value="1" id="option[]"></div>
       <div class="col-xs-2 col-md-1"><input type="checkbox" class="open_ended_answers" name="open_ended_answers[]" value="1"> Open-ended </div>
       <div class=" col-xs-2 col-md-1"> <input type="checkbox" class="required_open_answers" name="required_open_answers[]" value="1"> Required</div>
    </div>
    <div class="row" style="margin-top:20px;">
       <div class="col-xs-5 col-md-8"><input class="form-control question-option" name="option[]" type="text" value="2" id="option[]"></div>
       <div class="col-xs-2 col-md-1"><input type="checkbox" class="open_ended_answers" name="open_ended_answers[]" value="1"> Open-ended </div>
       <div class=" col-xs-2 col-md-1"> <input type="checkbox" class="required_open_answers" name="required_open_answers[]" value="1"> Required</div>
       <div class="col-xs-2 col-md-1"><button class="btn btn-danger btn-flat remove-option">Remove</button></div>
    </div>
</div>

Javascript:

$('.open_ended_answers').change(function() {
    if($(this).is(":checked")) {
      $(this).closest('.row').find(".required_open_answers").prop('disabled',false);
    }
    else{
      $(this).closest('.row').find(".required_open_answers").prop('disabled',true);
      $(this).closest('.row').find(".required_open_answers").prop('checked',false);
    }
});

if(required_open_answers != null){
    required_open_answers_input.each(function(i,val) {
        if(required_open_answers[i] !== undefined) {
            if(open_ended[i] == "1"){
              $(this).prop("disabled", true);
            }else{
              $(this).prop("disabled", false);
            }
            if(required_open_answers[i] == "1"){
              $(this).prop("checked",true);
            }
        }
    });
}

Answer 1

For jQuery 1.6+

User can use .prop() function:

$("input").prop("disabled", true);
$("input").prop("disabled", false);

For jQuery 1.5 and below

You need to use .attr() and disable the checkbox

$("input").attr('disabled','disabled');

and for re enable the checkbox (remove attribute entirely):

$("input").removeAttr('disabled');

Assuming you have an event handler on a checkbox, in any version of jQuery you can use the following property to check if your checkbox is enabled or not

if (this.disabled){
   // your logic here
}

More information at:

http://api.jquery.com/prop/#entry-longdesc-1

http://api.jquery.com/attr/

Answer 2

If you are not getting the desired output using prop("disabled", true), try

$(this).attr("disabled", true)

Answer 3

you can use javascript instead

$.each(document.getElementsByTagName('input'), (element) => {
  element.disabled = true;
});

Or, in your case

this.disabled = true;