Отключить флажки после проверки

Question

У меня есть список флажков, каждый из которых относится к строке в таблице. Каждая строка принадлежит клиенту. Я использовал имя клиента как класс флажков. Мне нужно только флажки, которые используют один и тот же класс, который будет включен после того, как будет отмечен первый флажок.

<input class="Alexander David" type="checkbox" value="Domain-9" name="bill[]" id="bill[]" onchange="check();"> 
<input class="Alexander David" type="checkbox" value="Domain-10" name="bill[]" id="bill[]" onchange="check();"> 
<input class="Alexander David" type="checkbox" value="Domain-11" name="bill[]" id="bill[]" onchange="check();"> 
<input class="John Doe" type="checkbox" value="Domain-12" name="bill[]" id="bill[]" onchange="check();"> 

function check(){ 
    $("#bill").on("change", function() { 
     if ($('#bill').attr('class') !== $(this).attr("class")) { 
      $(".bill").attr("class").prop("disabled", false); 
     } else { 
      $("#bill").prop("disabled", true); 
     } 
    }); 
} 

Answer 1

попробовать это:

$('input[name*=bill]').change(function() { 
 
    $t = $(this); 
 
    var $th = $(this).attr('class'); 
 
    if ($(this).is(':checked')) { 
 
    $('input[name*=bill]').each(function() { 
 
     if ($(this).attr('class') != $th) { 
 
     $(this).not($t).prop('disabled', true); 
 
     } 
 
    }); 
 
    } else { 
 
    $('input[name*=bill]').each(function() { 
 
     if ($(this).attr('class') != $th) { 
 
     $(this).not($t).prop('disabled', false); 
 
     } 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input class="Alexander David" type="checkbox" value="Domain-9" name="bill[]"> 
 
<input class="Alexander David" type="checkbox" value="Domain-10" name="bill[]"> 
 
<input class="Alexander David" type="checkbox" value="Domain-11" name="bill[]"> 
 
<input class="John Doe" type="checkbox" value="Domain-12" name="bill[]">

Answer 2

Попробуйте это:

disabled является property не attribute. поэтому используйте prop вместо attr.

<script> 
function check(){ 
$("[name='bill']").on("change", function() { 
if ($("[name='bill']").attr('class') !== $(this).className()) { 
$("[name='bill']").prop('disabled', true); 
} else { 
$("[name='bill']").prop('disabled', false); 
} 
}); 
} 
</script> 

Answer 3

Эй, вы можете попробовать мой код: я сделал некоторые изменения в коде, и это поможет вам:

<input class="bill" client="Alexander David" value="Domain-9" name="bill[]" type="checkbox"> 
<input client="Alexander David" value="Domain-10" name="bill[]" class="bill" type="checkbox"> 
<input client="Alexander David" value="Domain-11" name="bill[]" class="bill" type="checkbox"> 
<input client="John Doe" value="Domain-12" name="bill[]" class="bill" type="checkbox"> 
<script>  
$(document).ready(function(){ 
    $('.bill').change(function(){ 
     var client = $(this).attr('client'); 
     if($(this).is(':checked')) 
     { 
     $('input[client='+client+']').attr('disabled', 'disabled'); 
     $(this).removeAttr('disabled'); 
     } 
     else 
     $('input[client='+client+']').removeAttr('disabled'); 
    }); 
}); 
<script> 

Answer 4

Использование имен классов может быть проблематичным (из-за пробелов). Вместо этого используйте вместо этого атрибут data.

В этом примере мы переключить disabled свойство всех соответствующих входов:

$(function(){ 
 
    
 
    $("input[type=checkbox]").on("change",function(){ 
 
     var $this = $(this), 
 
      thisIdent = $this.data("ident"); 
 

 
     $("[data-ident='"+thisIdent+"']").not($this).prop("disabled",$this.is(":checked")); 
 

 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input data-ident="Alexander David" type="checkbox" value="Domain-9" name="bill[]"> 
 
<input data-ident="Alexander David" type="checkbox" value="Domain-10" name="bill[]"> 
 
<input data-ident="Alexander David" type="checkbox" value="Domain-11" name="bill[]"> 
 
<input data-ident="John Doe" type="checkbox" value="Domain-12" name="bill[]">

Answer 5

Вы выполняете функцию onChange с #bill, что означает bill - это идентификатор. Но в вашем HTML это имя элементов, и в этих флажках отсутствует идентификатор. Таким образом, ваш код не работает.

Опять же, когда элемент отключен, щелкните/измените/отметьте - на нем не будет работать какое-либо событие. Поэтому вам нужно подумать о какой-то альтернативе, например, поставить класс на флажок, чтобы он чувствовал себя отключенным.

<input class="billCheck Alexander David" type="checkbox" value="Domain-9" name="bill[]"> 
<input class="billCheck Alexander David" type="checkbox" value="Domain-10" name="bill[]"> 
<input class="billCheck Alexander David" type="checkbox" value="Domain-11" name="bill[]"> 
<input class="billCheck John Doe" type="checkbox" value="Domain-12" name="bill[]"> 


<script type="text/javascript" > 
     $(".billCheck").on("click", function() { 
       if ($(this).is(":checked")) { 
       $(this).addClass("disabled"); 
       } else { 
       $(this).removeClass("disabled"); 
       } 
     }); 

     $('input.disabled').on('click', function(evt) { 
       evt.preventDefault(); 
     }); 
    </script> 

    <style> 
     input.disabled { 
      opacity : .50; 
      filter : alpha(opacity=50); /* IE<9 */ 
      cursor : default; 
     } 
    </style> 

Я думаю, что это соответствует тому, что вы хотите.