如何在禁用的字段集中启用一个按钮

Question

我想禁用Fieldset中的所有元素，但在其中启用了几个按钮。 Demo:

<fieldset ng-disabled="true">
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">

    <input type="button" value="See More (Enable this!!) " ng-click="ButtonClicked1()" ng-disabled="false"/>
    Somethingelse: <input type="text">
    <input type="button" value="View Details " ng-click="ButtonClicked2()"/> 
</fieldset>

Answer 1

试试这个：

DEMO

HTML：

<fieldset id="form">
    <legend>Personalia:</legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />

    <input id="btn1" type="button" value="See More (Enable this!!) " onclick="ButtonClicked1()" />
    Somethingelse: <input type="text" />
    <input type="button" value="View Details " onclick="ButtonClicked2()"/> 
</fieldset>

SCRIPT：

$('#form :input').prop('disabled', true);
$("#btn1").prop('disabled', false);

Answer 2

我为您提供2种解决方案：

解决方案1：将按钮放在<legend>

内

label {
  display: block;
}

<fieldset disabled>
  <legend>
    Personalia:
    <button>See more</button>
  </legend>

  <label>Name: <input></label>
  <label>Email: <input></label>
  <label>Date of birth: <input></label>

  <label>Somethingelse: <input></label>
  <button>View Details</button> 
</fieldset>

解决方案2：使用“假”按钮

您可以使用aria-roles来“伪造”按钮role="button"（请参见ARIA button role）。切记添加必要的辅助功​​能，以使没有显示屏幕或鼠标的用户可以单击此按钮。重要属性是role="button"（用于屏幕阅读器）和tabindex="0"（用于键盘导航），还请记住为<{{d}}输入 Enter 和空格，以防您的用户没有鼠标。

keypress

const disabledButton = document.querySelector('.disabled-button');
const disabledOutput = document.querySelector('.disabled-output');
const enabledButton = document.querySelector('.enabled-button');
const enabledOutput = document.querySelector('.enabled-output');

function increment(output) {
  const current = Number.parseInt(output.textContent);
  output.textContent = `${current + 1}`;
}

disabledButton.addEventListener('click', () => increment(disabledOutput));
disabledButton.addEventListener('keypress', event => {
  if (['Enter', ' '].includes(event.key)) {
    increment(disabledOutput);
  }
});

enabledButton.addEventListener('click', () => increment(enabledOutput));
enabledButton.addEventListener('keypress', event => {
  if (['Enter', ' '].includes(event.key)) {
    increment(enabledOutput);
  }
});

label {
  display: block;
}

[role="button"] {
  -webkit-appearance: button;
  appearance: button;
  cursor: default;
  font-style: normal;
  -webkit-user-select: none;
  user-select: none;
}

Answer 3

解决方案1-在点击事件中使用图标

使用图标代替按钮，并将click事件附加到图标。这样会绕过禁用的字段集，并且像超级按钮一样工作。

<fieldset disabled='disabled'>
  <img src='/images/trash-can.png' ng-click='openModal()'/>
</fieldset>

和javascript（使用angularjs）

$scope.openModal = ()=>{
  // do stuff
};

解决方案2-在点击事件中使用Bootstrap样式的跨度

Bootstrap可以设置跨度的样式，使其看起来完全像一个按钮。跨度不使用或继承disabled属性。

<fieldset disabled='disabled'>
  <span class="btn btn-default" ng-click='openModal()'>
    Button Text
  </span>
</fieldset>

和javascript（使用angularjs）

$scope.openModal = ()=>{
  // do stuff
};