QA@IT
«回答へ戻る

0
 };
 
 ```
-- bootstrapに対応を任せず、自力対応し、色だけbootstrapのdisableクラスを使用しているだけなので、再度Clickすると色の変更などは残っています。

自己解決しました。
実際の問題とタイトルが異なっているため、後で質問のタイトルも変更致します。

本現象の問題点

  • bootstrap2.3.2においてaタグを使用したボタンで、Clickイベントでdisabledを設定するとhrefの設定が動作しない。
  • aタグにdisabled属性は存在しないため、bootstrapがそれっぽく動作するようにしてくれているが、IE8の場合は対応しきれていないというのが問題と思われます。

問題詳細の予想

bootstrap内でaタグのボタンのクリックイベントで、クリックイベント発生時にdisabledが設定されている場合、return falseを返す的な処理がclickイベントで行われているのでしょうが、
IE8についてはボタンクリック時ではなく、その時点でのdisabled属性を見てしまっているのではないか。

対処方法

  • disabled属性を付与するのではなくあくまでもaタグとして、2重押下を防ぐことで対応が可能です。

サンプル

jsbinというサイトで下記のコードを使用してサンプルを作成しました。
http://jsbin.com/vopoyujahu/2

修正コード

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <a id="atag" class="btn" href="javascript:alert('href')">CLICK ME</a>
  </body>
</html>
document.getElementById("atag").onclick=function() {
  if(!$(this).hasClass('disabled')) {
    alert("click");
    $(this).addClass("disabled");
  } else {
    return false;
  }
};

自己解決しました。
実際の問題とタイトルが異なっているため、後で質問のタイトルも変更致します。

## 本現象の問題点
- bootstrap2.3.2においてaタグを使用したボタンで、Clickイベントでdisabledを設定するとhrefの設定が動作しない。
- aタグにdisabled属性は存在しないため、bootstrapがそれっぽく動作するようにしてくれているが、IE8の場合は対応しきれていないというのが問題と思われます。

### 問題詳細の予想
bootstrap内でaタグのボタンのクリックイベントで、**クリックイベント発生時にdisabledが設定されている場合**、return falseを返す的な処理がclickイベントで行われているのでしょうが、
IE8についてはボタンクリック時ではなく、**その時点でのdisabled属性を見てしまっている**のではないか。

## 対処方法
- disabled属性を付与するのではなくあくまでもaタグとして、2重押下を防ぐことで対応が可能です。

## サンプル
jsbinというサイトで下記のコードを使用してサンプルを作成しました。
http://jsbin.com/vopoyujahu/2

## 修正コード
```html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <a id="atag" class="btn" href="javascript:alert('href')">CLICK ME</a>
  </body>
</html>
```

```javascript
document.getElementById("atag").onclick=function() {
  if(!$(this).hasClass('disabled')) {
    alert("click");
    $(this).addClass("disabled");
  } else {
    return false;
  }
};

```

サンプル追加。

0
 ## 対処方法
 - disabled属性を付与するのではなくあくまでもaタグとして、2重押下を防ぐことで対応が可能です。
 
+## サンプル
+jsbinというサイトで下記のコードを使用してサンプルを作成しました。
+http://jsbin.com/vopoyujahu/2
+
 ## 修正コード
 ```html
 <!DOCTYPE html>

自己解決しました。
実際の問題とタイトルが異なっているため、後で質問のタイトルも変更致します。

本現象の問題点

  • bootstrap2.3.2においてaタグを使用したボタンで、Clickイベントでdisabledを設定するとhrefの設定が動作しない。
  • aタグにdisabled属性は存在しないため、bootstrapがそれっぽく動作するようにしてくれているが、IE8の場合は対応しきれていないというのが問題と思われます。

問題詳細の予想

bootstrap内でaタグのボタンのクリックイベントで、クリックイベント発生時にdisabledが設定されている場合、return falseを返す的な処理がclickイベントで行われているのでしょうが、
IE8についてはボタンクリック時ではなく、その時点でのdisabled属性を見てしまっているのではないか。

対処方法

  • disabled属性を付与するのではなくあくまでもaタグとして、2重押下を防ぐことで対応が可能です。

サンプル

jsbinというサイトで下記のコードを使用してサンプルを作成しました。
http://jsbin.com/vopoyujahu/2

修正コード

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <a id="atag" class="btn" href="javascript:alert('href')">CLICK ME</a>
  </body>
</html>
document.getElementById("atag").onclick=function() {
  if(!$(this).hasClass('disabled')) {
    alert("click");
    $(this).addClass("disabled");
  } else {
    return false;
  }
};

  • bootstrapに対応を任せず、自力対応し、色だけbootstrapのdisableクラスを使用しているだけなので、再度Clickすると色の変更などは残っています。
自己解決しました。
実際の問題とタイトルが異なっているため、後で質問のタイトルも変更致します。

## 本現象の問題点
- bootstrap2.3.2においてaタグを使用したボタンで、Clickイベントでdisabledを設定するとhrefの設定が動作しない。
- aタグにdisabled属性は存在しないため、bootstrapがそれっぽく動作するようにしてくれているが、IE8の場合は対応しきれていないというのが問題と思われます。

### 問題詳細の予想
bootstrap内でaタグのボタンのクリックイベントで、**クリックイベント発生時にdisabledが設定されている場合**、return falseを返す的な処理がclickイベントで行われているのでしょうが、
IE8についてはボタンクリック時ではなく、**その時点でのdisabled属性を見てしまっている**のではないか。

## 対処方法
- disabled属性を付与するのではなくあくまでもaタグとして、2重押下を防ぐことで対応が可能です。

## サンプル
jsbinというサイトで下記のコードを使用してサンプルを作成しました。
http://jsbin.com/vopoyujahu/2

## 修正コード
```html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <a id="atag" class="btn" href="javascript:alert('href')">CLICK ME</a>
  </body>
</html>
```

```javascript
document.getElementById("atag").onclick=function() {
  if(!$(this).hasClass('disabled')) {
    alert("click");
    $(this).addClass("disabled");
  } else {
    return false;
  }
};

```
- bootstrapに対応を任せず、自力対応し、色だけbootstrapのdisableクラスを使用しているだけなので、再度Clickすると色の変更などは残っています。

回答を投稿

自己解決しました。
実際の問題とタイトルが異なっているため、後で質問のタイトルも変更致します。

本現象の問題点

  • bootstrap2.3.2においてaタグを使用したボタンで、Clickイベントでdisabledを設定するとhrefの設定が動作しない。
  • aタグにdisabled属性は存在しないため、bootstrapがそれっぽく動作するようにしてくれているが、IE8の場合は対応しきれていないというのが問題と思われます。

問題詳細の予想

bootstrap内でaタグのボタンのクリックイベントで、クリックイベント発生時にdisabledが設定されている場合、return falseを返す的な処理がclickイベントで行われているのでしょうが、
IE8についてはボタンクリック時ではなく、その時点でのdisabled属性を見てしまっているのではないか。

対処方法

  • disabled属性を付与するのではなくあくまでもaタグとして、2重押下を防ぐことで対応が可能です。

修正コード

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <a id="atag" class="btn" href="javascript:alert('href')">CLICK ME</a>
  </body>
</html>
document.getElementById("atag").onclick=function() {
  if(!$(this).hasClass('disabled')) {
    alert("click");
    $(this).addClass("disabled");
  } else {
    return false;
  }
};

  • bootstrapに対応を任せず、自力対応し、色だけbootstrapのdisableクラスを使用しているだけなので、再度Clickすると色の変更などは残っています。
自己解決しました。
実際の問題とタイトルが異なっているため、後で質問のタイトルも変更致します。

## 本現象の問題点
- bootstrap2.3.2においてaタグを使用したボタンで、Clickイベントでdisabledを設定するとhrefの設定が動作しない。
- aタグにdisabled属性は存在しないため、bootstrapがそれっぽく動作するようにしてくれているが、IE8の場合は対応しきれていないというのが問題と思われます。

### 問題詳細の予想
bootstrap内でaタグのボタンのクリックイベントで、**クリックイベント発生時にdisabledが設定されている場合**、return falseを返す的な処理がclickイベントで行われているのでしょうが、
IE8についてはボタンクリック時ではなく、**その時点でのdisabled属性を見てしまっている**のではないか。

## 対処方法
- disabled属性を付与するのではなくあくまでもaタグとして、2重押下を防ぐことで対応が可能です。

## 修正コード
```html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <a id="atag" class="btn" href="javascript:alert('href')">CLICK ME</a>
  </body>
</html>
```

```javascript
document.getElementById("atag").onclick=function() {
  if(!$(this).hasClass('disabled')) {
    alert("click");
    $(this).addClass("disabled");
  } else {
    return false;
  }
};

```
- bootstrapに対応を任せず、自力対応し、色だけbootstrapのdisableクラスを使用しているだけなので、再度Clickすると色の変更などは残っています。