Jquery道具("disabled"，true)不工作

Jquery prop.("disabled",true) not working

本文关键字：quot 工作 true 道具 Jquery disabled      更新时间：2023-09-26

我正在做一个基于另一个复选框状态的简单禁用和启用复选框。我在使用prop("disabled", true)禁用复选框时遇到了麻烦。但这行不通。我试着使用prop("checked", true)，它工作得很好。我不知道为什么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>
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);
            }
        }
    });
}

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/

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

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

你可以用javascript代替

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

或者，在你的情况下

this.disabled = true;

试试这个:

替换为

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);
    }

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

$(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()包含启用所有输入元素的过程。非常感谢你的帮助。

相关文章：