Question

我正在根据其他复选框的状态进行简单的禁用和启用复选框。它应该是一个简单的任务，但我在禁用复选框时遇到问题，prop（“disabled”，true）似乎无效。我尝试使用道具（“检查”，真实），它运作良好。我真的很沮丧，这个功能是如何起作用的。请参阅以下代码以供参考。

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 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="3" 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 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="4" 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 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="5" 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>

使用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

适用于jQuery 1.6 +

用户可以使用.prop（）函数：

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

适用于jQuery 1.5及以下版本

您需要使用.attr()并禁用复选框

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

并重新启用复选框（完全删除属性）：

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

假设您在复选框上有一个事件处理程序，在任何版本的jQuery中，您都可以使用以下属性来检查您的复选框是否已启用

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

更多信息：

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

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

Answer 2

如果使用prop("disabled", true)未获得所需的输出，请尝试

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

Answer 3

您可以使用javascript代替

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

或者，在你的情况下

this.disabled = true;

Answer 4

试试这个：

替换它：

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

带

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

Answer 5

我发现了这个问题。有一个文档的更改处理程序，它允许所有输入覆盖我的脚本。我改变了这段代码

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

到

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

ChangeOption（）包括启用所有输入元素的过程。非常感谢你的帮助。

jquery prop。（“disabled”，true）不工作

5 个答案: