Question

我有两个字段集。当选择第一个中的选项时，我希望第二个字段集被启用。但我的代码不起作用，即第二个字段集保持禁用状态。请有人帮忙吗？

这是我到目前为止所尝试的：

<div class="col-xs-6 col-lg-3">
         <form role="form" class="comments">
           <fieldset>
             <div class="form-group">
              <select class="form-control">
                <option>Comments</option>
                <option class="activate">Comments 1</option>
                <option class="activate">Comments 2</option>
                <option class="activate">Comments 3</option>
              </select>
            </div> <!--/.form-group-->
          </fieldset>
        </form>
      </div> <!--/.col-xs-6--> 

      <div class="col-xs-6 col-lg-3">
       <form role="form">
         <fieldset id="depend" disabled="true">
           <div class="form-group">
            <select class="form-control">
              <option>is greater than</option>
              <option>greater than 4</option>
              <option>greater than 5</option>
              <option>greater than 6</option>
            </select>
          </div> <!--/.form-group-->
        </fieldset>
      </form>
    </div> <!--/.col-xs-6-->

我使用过的jQuery：

$(document).ready(function() {
  $('.comments .activate').each(function() {
    if($(this).is(':selected')) {
      $('#depend').removeAttr("disabled", 'true');
    }
});

Answer 1

由于看起来您只会启用<select>框，而不是再次禁用它，因此您可以为其附加change()事件处理程序。此外，更改禁用属性时应使用prop()方法。

如果您想在用户再次选择第一个选项时禁用<select>框，那也很容易。只需找到类:selected的{{1}}选项即可。如果此选择的长度为1，则选择了有效选项：

.activate

JSFiddle

Answer 2

快速修复 - removeAttr只需要删除要删除的属性名称。可以removeAttr('disabled')或attr('disabled', false)。

但是，由于.activate始终位于<select>内，因此您可以将事件绑定到<select>标记。您还可以提高选择器的效率，使它们运行得更快：

$('.comments').find('select').on('change', function() {
    if ($(this).find(':selected').hasClass('activate')) {
        $('#depend').removeAttr('disabled');
    }
}).trigger('change'); // run on load

选择选项时，删除字段集上的已禁用属性

2 个答案: