jqueryを使用して、選択したdiv要素のチェックボックスをオフにします。

jqueryを使用して動的にチェックボックスを作成しています。スニペットに示されているチェックされていないチェックボックスを無効にしたいのですが、問題の原因となっている他のdiv要素ではなく、それぞれのdiv要素でのみチェックボックスを無効にします。jqueryを使用して、選択したdiv要素のチェックボックスをオフにします。

私は、それぞれのdivタグに基づいてチェックボックスを無効/有効にするコードを書いており、有効になっているとエラーをスローしているのでコメントしています。

$($(".checkbox").eq(id).":checkbox[name='radio']:not(:checked)").prop('disabled', true);

問題の説明：ここでは、同じ名前のチェックボックスも動的に作成される2つのdivタグを作成しています。したがって、最初のdivのチェックボックスをオンにすると、他のチェックボックスが無効になり、他のdivタグが作成され、期待どおりに動作します。しかし、2番目のdivタグのオプションをチェックすると、2番目のdivタグの他のオプションが無効にならず、最初のdivタグでチェックされたオプションのチェックを外すと、両方のオプションが最初のdivタグで無効になります。私はこれはすべてのチェックボックスが同じ名前を持っているからだと思います。

どのようにチェックボックスをそれぞれのdivタグでのみ無効にすることができますか？私は、コードの下にしようとしたが、より適切私を助けてください、問題を説明しスニペット下

$($(".checkbox").eq(1).":checkbox[name='radio']:not(:checked)").prop('disabled', true);

を動作しませんでした。

function checkdiv(id, val) { 
 
    if ($(":checkbox[name='radio']:checked").length == 1) 
 
    $(":checkbox[name='radio']:not(:checked)").prop('disabled', true); 
 
    else 
 
    $(":checkbox[name='radio']:not(:checked)").prop('disabled', false); 
 

 
    var diva = Number(id) + 1; 
 
    var divb = Number(id) + 1; 
 
    //if(id.length != 0){ 
 
    if (val.checked == true) { 
 
    if (diva < 2 && divb < 2) { 
 
     creatediv('maindiv') 
 
    } 
 
    } 
 
    // \t } 
 
    else { 
 
    var diva = Number(id) + 1; 
 
    var divb = Number(id) + 1; 
 

 
    $("#" + diva).remove(); 
 
    $(".divot").eq(divb).remove(); 
 

 
    } 
 
} 
 

 
function creatediv(main) { 
 
    var divid = $(".divin").length; 
 
    var divid1 = $(".divot").length; 
 

 

 
    var div = "<div class='col-xs-2 divin' id='" + divid + "' style='border:1px solid'><span class='header'></span></div><div class='col-xs-1 divot'></div>"; 
 

 
    $('#' + main).append(div); 
 

 

 

 
    loadval(divid) 
 

 
} 
 

 
function loadval(div) { 
 

 
    var div1 = "<div class='checkbox'><label><input type='checkbox' name='radio' value='Head' onchange='checkdiv(" + div + ",this)'>Head</label><br><label><input type='checkbox' name='radio' value='Hand' onchange='checkdiv(" + div + ",this)'>Hand</label></div>"; 
 
    $("#" + div).append(div1) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<body onload="creatediv('maindiv')"> 
 
    <div class="container"> 
 
    <div class="form-group row" id="maindiv"> 
 

 
    </div> 
 
    </div> 
 
</body>

出典

2017-12-20 coder12346

あなたはjQueryのAPIで ".find" を試してみました - これは、指定したセレクタ内の要素を見つけるだろう - "CHECKDIV" 機能（$（ '＃への変更を参照してください'+ ID））

function checkdiv(id, val) { 
 

 
    if ($('#' + id).find(":checkbox[name='radio']:checked").length == 1) 
 
    $('#' + id).find(":checkbox[name='radio']:not(:checked)").prop('disabled', true); 
 
    else 
 
    $('#' + id).find(":checkbox[name='radio']:not(:checked)").prop('disabled', false); 
 

 
    var diva = Number(id) + 1; 
 
    var divb = Number(id) + 1; 
 
    //if(id.length != 0){ 
 
    if (val.checked == true) { 
 
    if (diva < 2 && divb < 2) { 
 
     creatediv('maindiv') 
 
    } 
 
    } 
 
    // \t } 
 
    else { 
 
    var diva = Number(id) + 1; 
 
    var divb = Number(id) + 1; 
 

 
    $("#" + diva).remove(); 
 
    $(".divot").eq(divb).remove(); 
 

 
    } 
 
} 
 

 
function creatediv(main) { 
 
    var divid = $(".divin").length; 
 
    var divid1 = $(".divot").length; 
 

 

 
    var div = "<div class='col-xs-2 divin' id='" + divid + "' style='border:1px solid'><span class='header'></span></div><div class='col-xs-1 divot'></div>"; 
 

 
    $('#' + main).append(div); 
 

 

 

 
    loadval(divid) 
 

 
} 
 

 
function loadval(div) { 
 

 
    var div1 = "<div class='checkbox'><label><input type='checkbox' name='radio' value='Head' onchange='checkdiv(" + div + ",this)'>Head</label><br><label><input type='checkbox' name='radio' value='Hand' onchange='checkdiv(" + div + ",this)'>Hand</label></div>"; 
 
    $("#" + div).append(div1) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<body onload="creatediv('maindiv')"> 
 
    <div class="container"> 
 
    <div class="form-group row" id="maindiv"> 
 

 
    </div> 
 
    </div> 
 
</body>

出典

2017-12-20 13:32:08 combatc2

jqueryを使用して、選択したdiv要素のチェックボックスをオフにします。

答えて

関連する問題