20

次のhtmlコードがあります。ラベルをクリックすると、チェックボックスが切り替わります。

<td><label for="startClientFromWebEnabled">Client Launch From Web:</label></td>
<td><input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" onchange="startClientFromWebToggleRequiredAttribute()" /></td>

どうすればこれを防ぐことができますか? を削除するとfor="startClientFromWebEnabled"、トグルが停止しますが、イベントを発生させる要素からIDを取得するロジックがあるため、これが必要です...

4

5 に答える 5

21

最良の解決策は、直感的で予想される動作であるため、ラベルでチェックボックスを切り替えることです。

2番目に良い解決策は、チェックボックスがラベル内にネストされておらず、ラベルにfor属性がないことを確認することです。それに依存するロジックがある場合は、要素にデータ属性を配置し、それらをロジックで使用できます。

<input type="checkbox" data-myid="1" />
<label data-myid="1">foo</label>

最後の手段

clickjQuery を使用して、イベントのデフォルトの動作を防ぐことができます。

$('label[for="startClientFromWebEnabled"]').click(function(e) { 
    e.preventDefault();
});​

例については、このjsFiddleを参照してください。

于 2012-10-16T10:19:33.340 に答える
8

CSSソリューションもあります：

label {
   pointer-events: none;
   cursor: default;
}
于 2018-01-16T21:11:55.303 に答える
1

JQuery を使用している場合はid、ラベルに を追加してから、これをスクリプトに追加します。

$("#lbl").click(function(){
   return false; 
});
于 2012-10-16T10:19:30.020 に答える
0

「要素からIDを取得するロジックがあります」

forID を別の場所に保存する場合は、属性を削除できます。たとえば、data-*-attribute では次のようになります。

<label data-input-id="startClientFromWebEnabled">

一方、スタイルやユーザーの機能によっては、チェックボックスをポイントしてクリックすることが難しい場合があります。-属性を使用する正当な理由がありforます。

于 2012-10-16T10:28:21.777 に答える