Question

我有一个禁用和启用div内部元素的按钮。

按钮位于div内部。

当我单击按钮时，它会禁用div内的所有元素，包括按钮。我不希望按钮被禁用。

我已尝试过的内容如下：

的jQuery

$(document).ready(function() {
    $('#overrideButton').click(function() {
        $('#returnSkuInfo *').each(function() {
            var isDisabled = $(this).prop('disabled');
                if (isDisabled) {
                    if ($(this).not('#overridebutton')) {
                        $(this).prop('disabled', false);
                    }
                }
                else if (!isDisabled) {
                    if ($(this).not('#overridebutton')) {
                        $(this).prop('disabled', true);
                    }
                }
        });
    });
});

HTML 的

<div id="returnSkuInfo">
    <button id="overrideButton">Override</button>
    <input disabled/>
    <input disabled/>
    <select disabled>
        <option>1</option>
        <option>2</option>
    </select>
    <table>
        <tr>
            <td>Infomation</td>
            <td>More Info</td>
        </tr>
    </table>
</div>

但是，这不起作用，因为单击该按钮时，该按钮将被禁用。我需要这段代码来忽略按钮。

如何忽略按钮而不禁用按钮？

Answer 1

在这里你:)

$(document).ready(function() {
    $('#overrideButton').click(function() {
        var t = $(this);
        $('#returnSkuInfo').children().not(t).each(function() {
            var isDisabled = $(this).prop('disabled');
            if (isDisabled) {
                $(this).prop('disabled', false);
            }else if (!isDisabled) {
                $(this).prop('disabled', true);
            }
        });
    });
});

jsFiddle：http://jsfiddle.net/Lt2v0mxv/1/

想要更具体：

$(document).ready(function() {
    $('#overrideButton').click(function() {
        var t = $(this);
        $('#returnSkuInfo').find('button, select, textarea, input').not(t).each(function() {
            var isDisabled = $(this).prop('disabled');
            if (isDisabled) {
                $(this).prop('disabled', false);
            }else if (!isDisabled) {
                $(this).prop('disabled', true);
            }
        });
    });
});

jsFiddle：http://jsfiddle.net/Lt2v0mxv/2/

如果要忽略特定元素，请在元素上使用class="ignore"并使用以下jQuery（使用HTML示例）：

<强> HTML

<div id="returnSkuInfo">
    <button id="overrideButton" class="ignore">Override</button>
    <input disabled >
    <input disabled >
    <select disabled >
        <option>1</option>
        <option>2</option>
    </select>
        <input class="ignore" disabled>
        <textarea disabled></textarea>
        <button disabled>More Info...</button>
    <table>
        <tr>
            <td>Infomation</td>
            <td>More Info</td>
        </tr>
    </table>
</div>

<强>的jQuery

$('#overrideButton').click(function() {
    var i = $('.ignore');
    $('#returnSkuInfo').find('button, select, textarea, input').not(i).each(function() {
        var isDisabled = $(this).prop('disabled');
        if (isDisabled) {
            $(this).prop('disabled', false);
        }else if (!isDisabled) {
            $(this).prop('disabled', true);
        }
    });
});

jsFiddle：http://jsfiddle.net/Lt2v0mxv/3/

Answer 2

您只需要在选择器中更具体，只选择您想要影响的元素，而不是全部;所以我建议：

$('#overrideButton').click(function() {
    // getting only the <input /> and <select> descendants:
    $('#returnSkuInfo').find('input, select')
        // updating the disabled property, using the
        // anonymous function:
        .prop('disabled', function(i,v){
          // v (the second argument) contains the current value
          // of the property, here we simply return its inverse:
          return !v;
        });
});

＆＃13;

$('#overrideButton').click(function() {
  $('#returnSkuInfo').find('input, select').prop('disabled', function(i, v) {
    return !v;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="returnSkuInfo">
  <button id="overrideButton">Override</button>
  <input disabled/>
  <input disabled/>
  <select disabled>
    <option>1</option>
    <option>2</option>
  </select>
  <table>
    <tr>
      <td>Infomation</td>
      <td>More Info</td>
    </tr>
  </table>
</div>

＆＃13;

您当然可以选择所有元素，然后根据id或其他标识符（例如class - 名称或data-*属性）过滤掉特定元素， not()方法：

$('#overrideButton').click(function() {
  // selecting all the child elements:
  $('#returnSkuInfo').children()
      // removing unwanted elements (using an id in this case):
      .not('#overrideButton')
      // as above:
      .prop('disabled', function(i, v) {
          return !v;
      });
});

＆＃13;

$('#overrideButton').click(function() {
  $('#returnSkuInfo').children().not('#overrideButton').prop('disabled', function(i, v) {
    return !v;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="returnSkuInfo">
  <button id="overrideButton">Override</button>
  <input disabled/>
  <input disabled/>
  <select disabled>
    <option>1</option>
    <option>2</option>
  </select>
  <table>
    <tr>
      <td>Infomation</td>
      <td>More Info</td>
    </tr>
  </table>
</div>

＆＃13;

参考文献：

not()。
prop()。

Answer 3

在这里给猫皮肤很多方法。我尝试简化你的分支，我缓存了我们重复使用的变量，因此它不会过于占用内存。

$(document).ready(function() {
  //this is our main entrypoint into the dom
  var $returnSkuInfo = $('#returnSkuInfo');
 //click event on parent element 
  $returnSkuInfo.click(function(e) {
  /* this is the jquery object generated by $('#returnSkuInfo') */
  var $parent = $(this),
      /* find the button obj from the parent el (better performance) */
      $button = $parent.find('#overideButton'),
      /*actual markup of the button we'll use to compare below*/
      button = $button[0],
     /*the actual elements we want to toggle disable for, without the button*/
        $toDisable =  $button.siblings();

   if ($(e.target).context === button && $toDisable.attr('disabled') ) {    
     $toDisable.removeAttr('disabled');
   } else if ($(e.target).context === button) {
      $toDisable.attr('disabled', 'true');
   }
});

}）;

禁用其他元素内的元素除非是按钮

3 个答案: