홈>
이 옵션은 버튼으로 여러 상자를 선택했습니다.
<select multiple class="form-control" onchange="selectedIds(this)" >
<option value="" onclick="selectUnselect(this)" class="btn btn-default">
option1
</option>
</select>
jQuery를 통해 클릭시 버튼 클래스를 변경합니다
$(document).ready(function () {
$(".form-control option").click(function () {
if ($(this).hasClass('btn')) {
$(this).toggleClass('btn-success');
} else {
$(this).toggleClass('btn-default');
}
});
});
선택한 옵션의 버튼 색상을 녹색으로 변경하고 싶습니다 (예 :
btn btn-success
)
btn btn-default
에서 수업
사용자가 선택한 옵션을 다시 클릭하면 초기 색상으로 돌아갑니다.
단일 옵션을 클릭해도 제대로 작동하지만 여러 옵션을 선택하면 이전 버튼의 상단 색상이 파란색으로 변합니다. 이처럼
,
라이브 앱은 다음과 같습니다 : https://i2a.herokuapp.com/app/ 설문지/만들기/
사파리에서 옵션은 버튼으로 표시되지 않지만 Chrome에서는 버튼으로 표시됩니다
이 문제를 해결하는 데 도움이 될 수 있습니까? 감사합니다.
btn btn-default
- 답변 # 1
관련 자료
- javascript - 클릭시 버튼 클래스를 변경하는 방법은 무엇입니까?
- javascript - 버튼은 색상을 변경하지 않습니다
- swiftui - Swift 클래스에서 @State var를 변경하는 방법
- dart - Flutter 버튼은 상태를 active = true에서 active = false로 변경하지 않습니다
- javascript - 리스너 또는 라디오 버튼 값 변경 JQuery v351
- Powershell/XAML의 XML 파일에서 버튼의 내용을 변경하는 방법은 무엇입니까?
- html - 라디오 버튼 외부 테두리 색상 및 두께 변경
- dart - 실룩 거리다 - 사용자 정의 클래스 위젯에서 변수를 변경하는 방법
- c++ - MFC 응용 프로그램의 도구 모음에있는 단추의 IMAGE (유형은 중요하지 않음)를 어떻게 변경해야합니까?
- javascript - addEventListener로 클래스 변경을 유지하는 방법은 무엇입니까?
- Android 스튜디오, 자바에서 클릭 할 때마다 버튼 텍스트 변경
- javascript - HTML 변경 라디오 버튼 배경
- angular - AngularJS의 다른 구성 요소에서 호출 될 때 Modal 호출 Button의 텍스트 변경
- ios - 버튼 클릭시 버튼 이미지 변경 Xcode
- reactjs - 네이티브 반응 - 내 예제에서 클래스 구성 요소를 함수 구성 요소로 변경하는 방법은 무엇입니까?
- Change Location Button Image - 위치 버튼 이미지 변경 - google maps ios sdk
- javascript - 위치에 따라 고정 위쪽 화살표 버튼의 속성을 변경하는 방법은 무엇입니까?
- reactjs - 머티리얼 UI 테마를 통해 보조 버튼 텍스트 색상 변경
- javascript - 버튼 클릭시 반응에서 변수 값을 변경하는 방법
- reactjs - react/materialui - 버튼 클릭시 케이스 변경
관련 질문
- javascript : 부트 스트랩 모달은 닫은 후에도 몸에 패딩을 계속 추가합니다.
- javascript : 페이지 리디렉션은 작동하지만 기능은 작동하지 않습니다.
- javascript : 문자 길이가 특정 숫자보다 작을 때 jQuery 변경 html 클래스
- javascript : 버튼 클릭 이벤트 후 페이지 새로 고침 비활성화
- javascript : jQuery를 사용하여 동적 메타 태그 및 오픈 그래프 태그 설정
- javascript : JS에서 선택한 옵션 빌드의 항목 가격을 결합하려면 어떻게해야합니까?
- javascript : 버튼을 클릭하여 모달을 전환하고, 오른쪽 상단 모서리를 클릭하여 모달을 제거합니다. X 기호
- javascript : 라디오 단추를 선택하면 올바른 필드가 표시되지 않습니다.
- javascript : Fabric js-활성 개체의 모든 작업 /필터 재설정
- javascript : Jquery 스크롤을 페이지로드로 변경
코드에서 첫 번째 조건은 항상 참입니다.
.btn
항상 요소에 있습니다. 이것을 시도하십시오 :첫 번째 클릭에서
.btn-default
를 제거합니다 수업 및.btn-success
추가 수업. 두 번째 클릭에서는 그 반대가됩니다.