6

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);
            }
        }
    });
}
Ganesh Yadav
  • 2,607
  • 2
  • 29
  • 52
banri16
  • 247
  • 1
  • 6
  • 16
  • 2
    drop your parsed html here – madalinivascu Oct 18 '16 at 04:15
  • Is it the code within the `.change()` handler that you're asking about? What is the second block of code? – nnnnnn Oct 18 '16 at 04:20
  • I am sure $(this).prop("disabled", true); works just fine. Are you sure the the flow runs to that statement? – vothaison Oct 18 '16 at 04:37
  • @nnnnnn the first code is for the on change handler. while the second line of code is included in the on ready handler for first run. Checking existing values. – banri16 Oct 18 '16 at 05:14
  • 1
    @vothaison Yes I am, I tried changing the code to change a text and it run wells. And I believe $(this).prop("disabled", true) is working fine cause I used it to other input elements and it is working just fine. But for some reason it is not working on this specific area. I am not sure why. – banri16 Oct 18 '16 at 05:16
  • Please provide more context with HTML. At the moment we are guessing what your HTML structure is. If you can, please include edit your question and add the HTML in a snippet, the <> button in the editor. That will provide an interactive example of the problem you have. Also check for any console errors and report those. – Jon P Oct 18 '16 at 05:41
  • @JonP I included the html code in the question – banri16 Oct 18 '16 at 05:54

5 Answers5

23

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/

Heemanshu Bhalla
  • 3,603
  • 1
  • 27
  • 53
GibboK
  • 71,848
  • 143
  • 435
  • 658
  • 2
    Used both removeAttr and attr with no luck. – banri16 Oct 18 '16 at 05:19
  • @banri16 please edit your question, adding a jsfiddle (html included) where you reproduce the error, I would be glad help you to fix it. – GibboK Oct 18 '16 at 05:30
  • Thanks. I included the html code in my question. I tried to reproduce the error in jsfiddle but It is hard to reproduce since I am using laravel framework. Tried to code it but it was working fine. I think it is a problem in the code flow. – banri16 Oct 18 '16 at 05:53
  • I'm already using prop isn't OP using .prop... – Rahul Sonwanshi Dec 18 '20 at 07:24
1

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

$(this).attr("disabled", true)
Pang
  • 9,564
  • 146
  • 81
  • 122
Prachi Bhandari
  • 21
  • 8
1

you can use javascript instead

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

Or, in your case

this.disabled = true;
Tejasva Dhyani
  • 1,342
  • 1
  • 10
  • 19
1

Try this :

Replace this :

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

with 

if($(this).is(":checked")) {
        $(this).closest('div[class*="row"]').find(".required_open_answers").prop('disabled',false);
    }
Harshil Shah
  • 203
  • 1
  • 16
1

I found the issue. There was a change handler for a document which enable all inputs which overrides my script. I changed this code 

$(document).on("change", questionType, function() {
        if(questionType.val() == 0) {
            changeOption(0);
        }else if(questionType.val() == 2){
            changeOption(2);
        }else {
            changeOption(1);
        }
    });

to 

$(questionType).on("change", function() {
        if(questionType.val() == 0) {
            changeOption(0);
        }else if(questionType.val() == 2){
            changeOption(2);
        }else{
          changeOption(1);
        }
    });

ChangeOption() include process of enabling all the input elements. Thank you so much for all of your help.

banri16
  • 247
  • 1
  • 6
  • 16