-4

我有一个 Web 应用程序 (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 个复选框设为单选按钮以确认唯一一个复选框可以被选中的条件。
  • 根据上述操作禁用/启用接下来的 4 个复选框。所以，如果单选按钮没有被选中，那么接下来的 4 个复选框应该可供选择。

我必须实际禁用复选框而不是使用 jQuery 隐藏，因此禁用时复选框应该是纯灰色（不可选中）。

示例代码（为寻求类似解决方案的其他人去除了一些格式混乱）：

        <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>

我的要求：

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

4 回答 4

1

I think this is what you're looking for. You can achieve it using .index() to get current clicked checkbox. .slice() is used to get all elements at index 4 and after.

$('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

Or is it something like this that you want? Where only one of the first four checkboxes can be checked. If one is checked then all the others will be disabled. 

$('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/

EDIT:

if you have other checkboxes in the page and want to be able to separate them from this logic, you can add context in the selector so it keeps this code isolated to only those within this div like so

<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>

Then just add the context 

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

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

于 2012-09-24T15:00:33.887 回答
1 
      <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/在这里看到。

编辑：哇看起来有人在几分钟内就把我打败了。我们确实使用了非常不同的方法。然而。

于 2012-09-24T15:15:40.740 回答
0

You would have to try it yourself, but I would do something like (using javascript):

  • Add a class to every checkbox of the first group and another class to every checkbox of the second group;
  • Check for change events for the first class, turn off all of the first group but the clicked one;
  • Check if any of the first group is selected and activate / deactivate the second class group accordingly.
于 2012-09-24T15:00:04.863 回答
0

Give your first four checkboxes one class and then your second four a second class and then add onclick handlers to all the first checkboxes:

$('.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.

于 2012-09-24T15:00:19.233 回答