Question

我有一个我同意Checkbox，当选中或取消选中时，它使用JS在id="submit1"的按钮上切换已禁用的设置。但是，我添加了更多按钮，现在它需要切换所有这些按钮，而不仅仅是第一个按钮，因此ID不再起作用。

checkbox的当前代码：

 <input type="checkbox" checked id="agree" name="agree" value="ON" onclick="javascript: if(document.getElementById('agree').checked==true){document.getElementByID('submit1').disabled=false;}else{document.getElementByID('submit1').disabled=true;}">

对于button：

 <button onclick="do_file_form_submit(7);" id="submit1" name="submit1" class="custombutton">Button Number 1</button>

所以，我添加了更多buttons，所以我需要两件事：

我需要JS或jquery在选中此框时循环并切换EACH按钮，而不只是单个按钮（带有ID的第一个按钮）。
1. 在页面加载时，我还需要它来检查并查看该框是否为checked，如果没有，请循环浏览并disable所有这些按钮。

非常感谢您提供任何帮助!!

克雷格

Answer 1

HTML：

<input type="checkbox" checked id="agree" name="agree" value="ON">
<button onclick="do_file_form_submit(7);" id="submit1" name="submit1" class="custombutton">Button Number 1</button>
<button onclick="do_file_form_submit(7);" id="submit2" name="submit2" class="custombutton">Button Number 2</button>

<强> jQuery的：

$('#agree').change(function () {
    if ($(this).is(":checked")) {
        $('button').attr("disabled", false);    
    } else {
        $('button').attr("disabled", true);
    }
});

这是小提琴：http://jsfiddle.net/shahe_masoyan/UpxzB/3/

Answer 2

查看Your working page

   function checkStatus() {
    if ($('#agree_again').is(":checked")) {
        $(".custombutton").attr('disabled', false);
    }
    else {
        $(".custombutton").attr('disabled', true);
    }
}

$("#agree_again").change(function () {
    checkStatus();
});

你可以在body load上调用这个checkStatus函数来检查它是否在页面加载时被检查。

Answer 3

为所有按钮指定相同的类名。然后使用类名称作为选择器。

document.getElementByClassName("custombutton").disabled=false

Answer 4

试试这段代码。希望这能解决您的问题

$(function(){
//$("#agree").is(":checked")    
    EnableDisableButton(!$("#agree").is(":checked"))
    $("#agree").click(function(){
        EnableDisableButton(!$("#agree").is(":checked"));
    })
    function EnableDisableButton(isEnable){

        $(".custombutton").attr("disabled",isEnable);
    }
});

Answer 5

非常简单

<input type="checkbox" checked="checked" id="agree" name="agree" value="ON" 
 class="agree_chk" />
<input type="button" class="button" id="button1" value="button1"/>
<input type="button" class="button" id="button1" value="button2"/>
<input type="button" class="button" id="button1" value="button3"/>
<input type="button" class="button" id="button1" value="button4"/>

和javascript是

$(document).on('click','#agree',function() {
     $('.button').attr({disabled:!$(this).is(':checked')}) 
});

js fiddle http://jsfiddle.net/5V2Y4/

Answer 6

试试这段代码

<input type="checkbox" checked id="agree" name="agree" value="ON" onclick="change()">
    <input type="button" id="button1">
    <input type="button" id="button2">
    <input type="button" id="button3">

<script>

     $(document).ready(function() {
           change();
        });
    function change() {
        var i = 1;
        for (i = 1; i <= 3; i++) {
            var btnid = "button" + i;
            if (document.getElementById("agree").checked) {
                document.getElementById(btnid).disabled = false;
            } else {
                document.getElementById(btnid).disabled = true;
            }
        }
    }
</script>

您可以随着按钮数量的变化更改限制

基于CheckBox启用或禁用按钮

6 个答案: