Jquery prop.("disabled",true)无效

Question

我正在根据另一个复选框的状态简单地禁用和启用复选框。但是，我在使用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);
            }
        }
    });
}

- banri16

---

将您解析的HTML代码放在这里。 - madalinivascu

我确信 $(this).prop("disabled", true); 可以正常工作。你确定代码流程执行到了那个语句吗？ - vothaison

@nnnnnn 第一行代码是用于“on change”处理程序的。而第二行代码包含在“on ready”处理程序中，用于首次运行时检查现有值。 - banri16

@vothaison 是的，我是。我尝试更改代码以更改文本，并且它运行良好。而且，我相信 $(this).prop("disabled", true) 正常工作，因为我将其用于其他输入元素，它完全正常工作。但由于某种原因，在此特定区域上它不起作用。我不确定为什么。 - banri16

请提供更多的HTML上下文。目前我们只能猜测你的HTML结构。如果可以的话，请在问题中编辑并添加HTML片段，编辑器中的<>按钮会帮助你。这将提供一个交互式的示例来解释你遇到的问题。同时检查是否有任何控制台错误并报告它们。 - Jon P

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/

- GibboK

---

尝试使用removeAttr和attr，但都没有成功。 - banri16

@banri16 请编辑您的问题，添加一个包含HTML代码的jsfiddle链接以重现错误，我很乐意帮助您解决它。 - GibboK

谢谢。我在我的问题中包含了HTML代码。我尝试在jsfiddle中重现错误，但由于我正在使用Laravel框架，所以很难重现。我尝试编写代码，但它运行良好。我认为这是代码流程的问题。 - banri16

我已经在使用prop了，难道OP在使用.prop吗？ - Rahul Sonwanshi

Answer 2

如果使用prop("disabled", true)没有得到预期的输出，请尝试：

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

- Prachi Bhandari

---

我也尝试了这个，但不幸的是它也没有起作用。 - banri16

你有解决方案吗？ - Prachi Bhandari

是的，它在一个变更处理程序中。谢谢你的帮助。 - banri16

好的，太棒了。 - Prachi Bhandari

Answer 3

你可以使用 JavaScript 替代。

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

或者，针对您的情况

this.disabled = true;

- Tejasva Dhyani

---

谢谢，但我已经找到了问题。 - banri16

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

- Harshil Shah

Answer 5

我找到了问题所在。有一个文档的变更处理程序启用了所有输入，覆盖了我的脚本。我修改了这段代码。

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

- banri16