4 
​<form>
    <label for="1">Text 1</label>
        <input type="checkbox" name="1" value="something1" id="1"><br>
    <label for="2">Text 2</label>
        <input type="checkbox" name="2" value="something2" id="2"><br>
    <label for="3">Text 3</label>
        <input type="checkbox" name="3" value="something3" id="3"><br>
    <label for="4">Text 4</label>
        <input type="checkbox" name="4" value="something4" id="4">
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

これらはチェックボックスです。インターネット全体を検索しようとしましたが、何も見つかりませんでした。

ユーザーがID3と4をチェックできるようにしたいのですが 、1をチェックした場合は2をチェックできません。または、2をチェックした場合は1をチェックできません。そして、クラスを追加することはできません..という名前の.. grade-out{ color: #DDD;}

あなたが問題を理解することを願っています。前もって感謝します ！！

4

5 に答える 5

1

チェックボックスに属性を追加data-groupidして、それらが属するグループを識別します。次に、グループに属するチェックボックスにクリックハンドラーを追加します。これにより、同じグループ内の他のすべてのチェックボックスがチェックされている場合は無効になり、チェックされていない場合は有効になります..

マークアップが一貫しており、ラベルが常にそれぞれのチェックボックスの前身であると仮定すると、メソッドを使用してそれらを簡単にターゲットにすることができますprev()。

$('input:checkbox[data-group]').click(function() {

    var groupid = $(this).data('group');
    var checked = $(this).is(':checked');

    if(checked) {

        $('input:checkbox[data-group=' + groupid + ']').not($(this))
           .attr('disabled', 'disabled')
           .prev().addClass('grade-out');

    } else {

        $('input:checkbox[data-group=' + groupid + ']')
           .removeAttr('disabled')
           .prev().removeClass('grade-out');

    }

});

デモ

于 2012-09-07T08:09:04.423 に答える
0

ラジオフォーム入力を使用できます。とにかく、チェックボックスを使用する必要がある場合は、JavaScriptを使用できます（たとえば、jQueryを使用）

$('#1,#2').click(function(){
    var $this = $(this);
    var theOtherId = $this.attr('id') == 1 ? 2 : 1;
    var theOtherOne = $('#'+theOtherId);
    if( $this.is(':checked') ) theOtherOne.attr('checked',false);
});

これはあなたが探しているものですか？

作り直した例:デモ フィドル

$('#1,#2').click(function(){
    var $this = $(this);
    var theOtherId = $this.attr('id') == 1 ? 2 : 1;
    var theOtherOne = $('#'+theOtherId);
    if( $this.is(':checked') ) theOtherOne.attr('disabled',true);
    else theOtherOne.attr('disabled',false);
});
于 2012-09-07T08:05:01.710 に答える
0

上記のより複雑で柔軟なソリューションがありますが、しっかりとした明確な使用例が必要な場合は、こちらをご覧ください。ID を使用すると、作業が簡単になります。

http://jsfiddle.net/erdincgc/uMhbs/1/

HTML (追加されたクラスと ID) ;

<form>
    <label for="1">Text 1</label>
        <input class="checks" type="checkbox"  id="option1"   name="option1"  value="something1" id="1"><br>
    <label for="2">Text 2</label>
        <input class="checks" type="checkbox"  id="option2"   name="option2" value="something2" id="2"><br>
    <label for="3">Text 3</label>
        <input class="checks" type="checkbox"  id="option3"   name="option3" value="something3" id="3"><br>
    <label for="4">Text 4</label>
        <input class="checks" type="checkbox"  id="option4"   name="option4" value="something4" id="4">
</form>

そしてJS

$('.checks').click(function(){
   op1 = $('#option1') ; 
   op2 = $('#option2') ;
   this_id = $(this).attr("id") ;
   this_state = $(this).attr("checked");

if(this_id =="option1"){
    if( this_state == "checked" ){
        op2.attr("disabled",true);            
    }
    else {
        op2.attr("disabled",false);
    }
    op2.prev().toggleClass('disabled'); 
} 

if(this_id=="option2"){
    if( this_state=="checked" ) 
        op1.attr("disabled",true); 
    else {
            op1.attr("disabled",false);
        }
        op1.prev().toggleClass('disabled');  
    }
});
于 2012-09-07T09:10:41.710 に答える
0

data-disable特定の要素を無効にしてチェックする属性を割り当てますonchange。

これは私がそれを行う方法です：

<form>
    <label for="1">Text 1</label>
        <input type="checkbox" name="1" value="something1" id="1" data-disable="2,3"><br>
    <label for="2">Text 2</label>
        <input type="checkbox" name="2" value="something2" id="2" data-disable="1"><br>
    <label for="3">Text 3</label>
        <input type="checkbox" name="3" value="something3" id="3"><br>
    <label for="4">Text 4</label>
        <input type="checkbox" name="4" value="something4" id="4">
</form>​​​

およびスクリプト:

$('input:checkbox​​​​​​​​​​​​​​​​​​')​.on('change', function(){
    var toUncheck = $(this).attr('data-disable');
    var self = $(this);
        $.each(toUncheck.split(','), function(el, val){
            if(self.attr('checked') == 'checked'){
                $('#'+val).attr('disabled', 'disabled');
            } else {
                $('#'+val).removeAttr('disabled');
            }
        });
});​

JSFiddleデモ

于 2012-09-07T08:11:27.693 に答える
0

  1. $("#element_id").hide();チェックボックスを無効にするために使用します

  2. $("#element_id").attr("checked", true);チェックボックスが選択されているかどうかを確認するために使用します

  3. 要素にクラスを追加するために使用$("#element_id").addclass();します。つまり、jQuery セレクターを簡単に検索すると、解決策が見つかります。

詳細については、http://api.jquery.com/category/selectors/ を参照してください。

于 2012-09-07T08:14:42.790 に答える