Question

我有一个脚本，当我点击它显示/隐藏2个不同的div时，所有3个复选框都有效。

<input id="chk1" type="checkbox" />
<input id="chk2" type="checkbox" />
<input id="chk3" type="checkbox" />

var chkBoxes = $('#chk1,#chk2,#chk3');

      chkBoxes .change(function(){

      if (chkBoxes.filter(':checked').length == chkBoxes.length){
        $('#checked2').show();
        $('#checked1').hide();
      }else{
        $('#checked2').hide();
        $('#checked1').show();
      }
    });

有没有人知道如何修改这个，所以我可以按如下方式禁用复选框：

<input id="chk1" type="checkbox" disabled="disabled" />
<input id="chk2" type="checkbox" disabled="disabled" />
<input id="chk3" type="checkbox" disabled="disabled" />

并为每个复选框添加一个链接以执行更改功能并勾选复选框。我正在使用：

<a href="" onClick="document.checklist.chk1.value=1;">Link</a>
<a href="" onClick="document.checklist.chk2.value=1;">Link</a>
<a href="" onClick="document.checklist.chk3.value=1;">Link</a>

以上似乎可以正常检查复选框，但它不会调用jquery更改函数。

希望这是有道理的，先谢谢。

Answer 1

赞成。你需要在复选框上触发已检查的事件..看看我是否无法设法生成一个jsfiddle示例。

http://jsfiddle.net/F7q4Y/

<a href="#" onclick="$('#chk1').trigger('click');">Link1</a>
<a href="#" onClick="$('#chk2').trigger('click');">Link2</a>
<a href="#" onClick="$('#chk3').trigger('click');">Link3</a>

Answer 2

您可以使用$(selector).prop('disabled',true);执行禁用的操作。

要点击链接，您可以为链接提供一个类，该链接引用复选框ID：

$('a').click(function(){
  $('#'+this.className).prop('checked',true);
  return false;
});

Answer 3

首先，我会在onClick方法的末尾添加“return false”。

然后我会通过jQuery调用值更改，而不是使用纯javascript。如果这不起作用，那么尝试手动触发事件

$("#chk1").trigger("change");

虽然如果您使用链接来检查复选框，为什么还要在复选框上添加更改事件呢？只需将其放在onClick方法的链接上。

像

这样的东西

<a href=#" onClick="return checkAndToggleDiv($('chk1'));">Link</a>

checkAndToggleDiv(chk){
   chk.prop('checked',true);
   //do anything else you need, you can even use chk.prop('checked') 
   //to get the current value of checked
}

Answer 4

您可以执行以下操作来处理<a/>点击。

$("a[rel]").click(function(e) {
    e.preventDefault();
    var chk = $("#" + $(this).attr("rel"))[0];
    chk.checked = !chk.checked;
    chkBoxes.change();
});

使用以下标记：

<a href="" rel="chk1">Link 1</a>
<a href="" rel="chk2">Link 2</a>
<a href="" rel="chk3">Link 3</a>

<强> Example on jsfiddle

jquery show hide div为多个复选框

4 个答案: