사용 불가능한 필드 집합 내에서 버튼 하나를 사용 가능으로 설정하는 방법

사용 불가능한 필드 집합 내에서 버튼 하나를 사용 가능으로 설정하는 방법

Fieldset 내의 모든 요소를 비활성화하지만 필드 세트 내의 버튼은 몇 개만 활성화하고 싶습니다.데모:

<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>

3가지 솔루션이 있습니다.

해결책 1:<details>그리고.<summary>

이 예에서는 다음과 같은 요소를 사용해야 합니다.

label {
  display: block;
}

<fieldset disabled>
  <legend>
    Personalia:
  </legend>

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

  <label>Somethingelse: <input></label>

  <details>
    <summary>View Details</summary>
    <p>A more detailed description</p>
  </details>
</fieldset>

해결책 2: 버튼의 안쪽을<legend>

자세한 정보는 공개하지 않지만 필드 세트의 비활성화를 전환하려면 전환 버튼을 요소에 넣을 수 있습니다.

const fieldset = document.querySelector("fieldset");
const toggleButton = document.getElementById("toggle-button");

toggleButton.addEventListener("click", (event) => {
  fieldset.disabled = !fieldset.disabled;
  toggleButton.textContent = fieldset.disabled ? "Enable" : "Disable";
  toggleButton.setAttribute("aria-pressed", `${!fieldset.disabled}`);
});

label {
  display: block;
}

<fieldset disabled>
  <legend>
    Personalia:
    <button id="toggle-button" aria-pressed="true">
      Enable
    </button>
  </legend>

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

  <label>Somethingelse: <input></label>
  <button>This may be disabled</button> 
</fieldset>

해결책 3: '짝퉁' 버튼 사용

사용 사례가 완전히 다른 경우, 아리아 롤을 사용하여 단추를 '짝퉁'할 수 있습니다.role="button"('ARIA' 버튼의 역할 참조).디스플레이 화면이나 마우스가 없는 사용자가 이 버튼을 클릭할 수 있도록 하기 위해 필요한 접근성 기능을 추가해야 합니다.중요한 속성은 다음과 같습니다.role="button"(화면 리더용) 및tabindex="0"(키보드 네비게이션의 경우), 핸들러를 추가하는 것도 잊지 마십시오.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;
}

<fieldset disabled>
  <legend>Disabled form elements</legend>

  <label>Input 1<input name="input 1"></label>
  <label>Input 2<input name="input 2"></label>
  
  <button
    class="disabled-button"
    name="disabled-button"
  >
    This is disabled
  </button>

  <i
    class="enabled-button"
    role="button"
    tabindex="0"
  >
    This is enabled
  </i>
</fieldset>

<label>
  Disabled button clicks:
  <output class="disabled-output">0</output>
</label>

<label>
  Enabled button clicks:
  <output class="enabled-output">0</output>
</label>

해결책 1 - 클릭 이벤트와 함께 아이콘 사용

버튼 및 연결 대신 아이콘을 사용합니다.click아이콘에 이벤트를 표시합니다.이것은 비활성화된 필드 세트를 우회하여 마법처럼 작동합니다.

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

및 javascript(angularjs 사용)

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

해결책 2 - 클릭 이벤트가 있는 부트스트랩 스타일의 스팬 사용

부트스트랩은 버튼과 똑같이 보이도록 스판을 스타일링할 수 있습니다.스팬은 다음을 사용하거나 상속하지 않습니다.disabled기여하다.

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

및 javascript(angularjs 사용)

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

이것을 시험해 보세요.

데모

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>

스크립트:

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

언급URL : https://stackoverflow.com/questions/25446225/how-to-enable-one-button-inside-a-disabled-fieldset