Question

我有一个网络应用程序（PHP），我必须进行此更改。我更像是一个数据库，编写脚本的人，请耐心等待我！

我在表单中有8个复选框（编号为1~8）。我必须实现以下条件：

If one of the first 4 checkboxes are checked (only one checkbox can be checked in the first 4),
Then the next 4 checkboxes should be disabled
Else the next 4 checkboxes should be enabled.

我的解决方案：

将前4个复选框设置为radiobuttons以确认唯一一个复选框可以选择条件。
根据上述操作禁用/启用后4个复选框。所以，如果未选择单选按钮，则接下来的4个复选框应该是可供选择。

我必须实际禁用复选框而不是使用jQuery隐藏，因此禁用时复选框应该是solidgray（取消选中）。

示例代码（为某些寻找类似解决方案的其他人删除了一些格式化问题）：

        <div>
            <input type="checkbox" name="check1" value="1" id="check1" <?php if (!empty($rows['check1'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check2" value="1" id="check2" <?php if (!empty($rows['check2'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check3" value="1" id="check3" <?php if (!empty($rows['check3'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check4" value="1" id="check4" <?php if (!empty($rows['check4'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check5" value="1" id="check5" <?php if (!empty($rows['check5'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check6" value="1" id="check6" <?php if (!empty($rows['check6'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check7" value="1" id="check7" <?php if (!empty($rows['check7'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check8" value="1" id="check8" <?php if (!empty($rows['check8'])) { echo 'checked="checked"'; } ?> />
        </div>

我的要求：

这样做最有效的方法是什么？（简单而不会使问题复杂化）
非常感谢任何示例代码。

Answer 1

我认为这就是你要找的东西。您可以使用.index()来获取当前点击的复选框。 .slice()用于获取索引4及之后的所有元素。

$('input[type=checkbox]').change(function(){
    var $linputs =  $('input[type=checkbox]').slice(4);
    var $this = $(this);    
    $linputs.prop('disabled',($this.index() < 4 && this.checked));        
    if($this.index() < 4 && this.checked){
        $linputs.prop('checked',false);
    }
});

FIDDDLE

或者你想要这样的东西吗？只能检查前四个复选框中的一个。如果选中一个，那么所有其他人将被禁用。

$('input[type=checkbox]').change(function(){
    var $this = $(this);    
    $(linputs).prop('disabled',($this.index() < 4 && this.checked));        
    if($this.index() < 4 && this.checked){
        $(linputs).prop('checked',false);
    }
});

http://jsfiddle.net/h5wDr/

修改

如果页面中有其他复选框，并且希望能够将它们与此逻辑分开，则可以在选择器中添加上下文，以便将此代码仅隔离到此div中的那些代码

<div id='test'>
                <input type="checkbox" name="check1" value="1" id="check1" >first
            <input type="checkbox" name="check2" value="1" id="check2" >second
            <input type="checkbox" name="check3" value="1" id="check3" >third
            <input type="checkbox" name="check4" value="1" id="check4" >fourth
            <input type="checkbox" name="check5" value="1" id="check5" >fifth
            <input type="checkbox" name="check6" value="1" id="check6" >sixth
            <input type="checkbox" name="check7" value="1" id="check7" >seventh
            <input type="checkbox" name="check8" value="1" id="check8" >eight
</div>

然后只需添加上下文

var $inputs = $('input[type=checkbox]', $('#test')); 
// this will only select checkboxes within the element with id=test

http://jsfiddle.net/h5wDr/2/

Answer 2

      <div>
        <input type="checkbox" name="check1" value="1" id="check1" />
        <input type="checkbox" name="check2" value="1" id="check2"  />
        <input type="checkbox" name="check3" value="1" id="check3"  />
        <input type="checkbox" name="check4" value="1" id="check4"  />
        <input type="checkbox" name="check5" value="1" id="check5"  />
        <input type="checkbox" name="check6" value="1" id="check6"  />
        <input type="checkbox" name="check7" value="1" id="check7"  />
        <input type="checkbox" name="check8" value="1" id="check8"  />
    </div>
<script>
    $(document).ready(function () {

        var $firstFourChecks = $("#check1,#check2,#check3,#check4");
        var $lastFourChecks = $("#check5,#check6,#check7,#check8");

        $firstFourChecks.on('click', function (e) {

            var isCheck = $(this).is(':checked');
            $firstFourChecks.not($(this)).prop('checked', false);
            $(this).prop('checked', isCheck);


            if (isCheck) {
                $lastFourChecks.prop("disabled", true).prop('checked', false);
            } else {
                $lastFourChecks.prop("disabled", false);
            }
        });
    });
</script>

这完全是在javascript中完成的，并且与您使用php的事实无关。基本上，我们确保在前四个中您没有选择，它们被设置为false。然后我们切换单击的状态。

如果您在前四个中点击了某些内容，则最后四个已关闭并禁用，否则它们将被重新显示。这与发布的伪代码匹配。

您应该可以直接粘贴它。出于速度原因，选择器会被缓存。

http://jsfiddle.net/L4qeN/在此处查看。

编辑：哇看起来好像有人在几分钟内打败了我。我们确实使用了截然不同的方法但是。

Answer 3

你必须自己尝试，但我会做（像使用javascript）：

将类添加到第一组的每个复选框，将另一个类添加到第二组的每个复选框;
检查第一堂课的更改事件，关闭所有第一组，但点击所有第一组;
检查是否选择了第一个组中的任何一个，并相应地激活/停用第二个类组。

Answer 4

将前四个复选框分配给一个类，然后将第二个四个复选框添加到第二个类中，然后将onclick个处理程序添加到所有第一个复选框中：

$('.firstfour_class').click(
   if $('input:checkbox:checked.firstfour_class').length > 1){
       //code to turn OFF the second four and make them unchecked
   } else {
      //code to turn ON the second four
   }
})

Check out the jQuery :checked selector

如何根据点击事件启用或禁用复选框？

4 个答案: