如何禁用基于另一个复选框启用复选框？ [英] How to disable enable a checkbox based on another checkbox?

问题描述

 < form action =saveresponse.phpmethod =POST name =mainForm> 
 
< input class =cbox_yestype =checkboxname =yes []value =01.jpg
 onclick =spenable（）/> OK 
< input class =cbox_sptype =checkboxname =sp []value =01.jpgdisabled />特殊< br />> 
 
< input class =cbox_yestype =checkboxname =yes []value =02.jpg
 onclick =spenable（）/> OK 
< input class =cbox_sptype =checkboxname =sp []value =02.jpgdisabled /> Special< br /> 
 
等等等等等等等等... 
  

现在，我想要什么是在页面加载时，只有在用户选中了对应的yes []复选框时，所有sp []复选框才能被禁用和启用。

我使用的JavaScript代码：（检查JS是否捕获了yes []复选框的状态？

 函数spenable（）{
 var yes = document.mainForm.yes []。value; 
 if（yes == true）
 // alert（true）; 
 document.mainForm.yes []。value = checked; 
 else 
 // alert（false）; 
 document.mainForm.yes []。value = checked; 
}; 
}; 
  

但我没有收到任何警报（既不，也不是）。

所以，在第二行是[]（方括号）是不正确的？或者我的if / else条件在JS中是错误的？

PS所有这些问题在SO或谷歌交易w只有一个箱子/一双。

P.S.如果需要，我可以将yes []改为yes1，yes2，yes3等，并且对应的sp1，sp2，sp3其中1,2,3是For循环的$ i，但是如何在JS中捕获/引用它？

_ UPDATE： _

流量/澄清）：

最初特别复选框将被禁用，并且OK复选框将被取消选中。

然后如果用户选中确定，特殊功能将被启用。

如果用户想要的话，他可以打勾Special。

如果以后用户改变主意并取消选择OK，则Special应该被取消选中并且再次被禁用。

解决方案

为了简单起见，我在这里使用了jQuery。

 <$ c $ （$（this））.attr（checked）; $ b（$（input[name ='yes []']）。 $ b $（this）.next（）。attr（disabled，！checked）; //下一个复选框将启用
}）; //或者禁用基于t他
 //在它之前的复选框
  

演示： http://jsfiddle.net/DerekL/Zdf9d/

纯粹的JavaScript ： http://jsfiddle.net/DerekL/Zdf9d/1/

更新

选中特殊复选框时，它将取消选中第一个复选框。

Pure JavaScript： http://jsfiddle.net/DerekL/Zdf9d/2/

ULTIMATE UPDATE

以下是演示：

纯粹的JavaScript： http://jsfiddle.net/DerekL/Zdf9d/3/

jQuery： http://jsfiddle.net / DerekL / Zdf9d / 4 /

_{小记： docu ment.querySelectorAll 适用于所有现代浏览器和IE8 +，包括IE8。如果你想支持IE6，最好使用 jQuery 。}

Following code is generated by a for loop.

<form action="saveresponse.php" method="POST" name="mainForm">

<input class="cbox_yes" type="checkbox" name="yes[]" value="01.jpg"
onclick="spenable()" /> OK
<input class="cbox_sp" type="checkbox" name="sp[]" value="01.jpg" disabled />Special<br />

<input class="cbox_yes" type="checkbox" name="yes[]" value="02.jpg"
onclick="spenable()" /> OK
<input class="cbox_sp" type="checkbox" name="sp[]" value="02.jpg" disabled />Special<br />

etc etc upto n times...

Now, what I want is that on page load, all the sp[] checkboxes should be disabled and enabled only if their corrosponding yes[] checkbox is checked by user.

Javascript code I am using: (Just to check if JS is capturing the states of yes[] checkbox?

function spenable(){
        var yes = document.mainForm.yes[].value;
            if (yes == true)
                //alert("true");
                document.mainForm.yes[].value = checked;
            else
                //alert("false");
                document.mainForm.yes[].value = checked;
        };
    };

But I am not getting any alert (Neither Yes, Nor No).

So, is yes[] (Square brackets) in second line is incorrect? Or my if/else condition is wrong in JS?

P.S. All the questions here at SO or on Google deal with only one case/pair.
P.S. If required, I can change yes[] to yes1, yes2, yes3 etc and corresponding sp1, sp2, sp3 where 1,2,3 is $i of For loop, but then how will I capture/refer to it in JS?

_UPDATE:_

The flow/conditions are(Clarification):
Initially Special checkbox will be disabled and OK checkbox will be unchecked.
Then if user checks Ok, Special gets enabled.
If user want, he can tick Special.
If, later, user changes mind and untick the OK, Special should be unticked as well as disabled again.

解决方案

I used jQuery here for the sake of simpleness.

$("input[name='yes[]']").change(function() {      //When checkbox changes
    var checked = $(this).attr("checked");
    $(this).next().attr("disabled", !checked);    //The next checkbox will enable
});​                                               // or disable based on the
                                                  // checkbox before it

Demo: http://jsfiddle.net/DerekL/Zdf9d/
Pure JavaScript: http://jsfiddle.net/DerekL/Zdf9d/1/

UPDATE

It will uncheck the first checkboxes when the Special checkbox is checked.
Pure JavaScript: http://jsfiddle.net/DerekL/Zdf9d/2/

ULTIMATE UPDATE

Here's the demo:
Pure JavaScript: http://jsfiddle.net/DerekL/Zdf9d/3/
jQuery: http://jsfiddle.net/DerekL/Zdf9d/4/

_{Little note: document.querySelectorAll works on all modern browsers and IE8+ including IE8. It is always better to use jQuery if you want to support IE6.}

这篇关于如何禁用基于另一个复选框启用复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！