如何禁用整个div？

Question

我有一个div，里面有一个元素，如单选按钮或复选框。我想一举启用/禁用所有相同的功能。这个

<!-- 1 -->
<div disabled="true">
  ........
</div>

<!-- or -->  
<!-- 2 -->
<div disabled="disabled">
  ........
</div>

不起作用。如何让它工作而不必在div中禁用每个单独的html表单元素？

Answer 1

你需要遍历div中的所有表单元素并逐个禁用它们：

＆＃13;

＆＃13;

// Helper function to change disabled state of single element
function changeDisabledState( elm, disabled ) {
  if ( !disabled ) {
    elm.removeAttribute( 'disabled' );
  }
  else {
    elm.setAttribute( 'disabled', disabled );
  }
}

function toggleFormDiv( container ) {
  // Check if helper class is there
  const isDisabled = container.classList.contains( 'disabled' );

  // Query all fields inside DIV.
  const allFields = container.querySelectorAll( 'input, textarea, button, select' );
  
  // Iterate over all elements and set the opposite state
  [ ...allFields ].forEach( elm => {
    changeDisabledState( elm, !isDisabled );
  } );
  
  // Toggle helper class
  container.classList.toggle( 'disabled' );
}

document.getElementById( 'toggle' ).addEventListener( 'click', () => {
  // Get DIV container to be disabled
  const container = document.querySelector( '.container' );
  toggleFormDiv( container );
} );

＆＃13;

<form class="form">
  <div class="container">
    <input type="input" value="Textfield" />
    <input type="checkbox" value="1" />
    <button>Button</button>
    <select>
      <option>Select</option>
    </select>
    <textarea>Textarea</textarea>
  </div>
</form>

<button id="toggle">Toggle</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用JQuery试试这个。要禁用所有控件，需要使用基于this demo的jquery attr（）方法将禁用的属性值设置为禁用。

//禁用div1的元素

[root@ushdbld00058lb openplatform]# cat /opt/presto-server-0.181/etc/catalog/mongodb.properties
connector.name=mongodb
#mongodb.seeds=host1,host:port
mongodb.seeds=hostname:27017
mongodb.schema-collection=test
mongodb.credentials=XXXXXXXXX:XXXXXXXXXXX@admin
#mongodb.min-connections-per-host=
#mongodb.connections-per-host=
#mongodb.max-wait-time=
#mongodb.connection-timeout=
#mongodb.socket-timeout=
#mongodb.ssl.enabled=
#mongodb.read-preference=
#mongodb.write-concern=
#mongodb.required-replica-set=
#mongodb.cursor-batch-size=`

Answer 3

没有禁用HTML中的Div实际上您可以使用JQuery来使用foreach循环禁用此DIV的所有内容。至于CSS规则，你必须手动定义它们。

Answer 4

也许你可以在 PHP if和else语句中看到答案，这可以“禁用”部分代码：）

<?php

if(smthing) {
echo <<<END
<div> ... </div>
END;
} 

else {
echo <<<END
<div> ... </div>
END;
}
?>

-Edit： 这是PHP解决方案=＆gt;服务器端解决方案。

也许 JQuery 或 JavaScript 可以提供更多帮助：））

希望我帮助你:)。

EriiYenn Lacroix