复选框启用 Onload 以显示其他元素

checkbox enable onload to display other elements

本文关键字：其他 元素 显示 启用 Onload 复选框      更新时间：2023-09-26

好的， 这里的问题是允许表单从 mysql 设置中获取信息，例如启用或禁用。 然后，复选框将确定以下 3 个文本字段 (Box123( 是根据该请求启用还是禁用。

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="test.js"></script>
</head>
<body>
    <form>
        <input type="checkbox" name="detailsgiven" id="checker" checked=checked>Enabled?
        <br>
        <input type='text' name="details" id="tb1" value='box1'>
        <br>
        <input type='text' name="details" id="tb2" value='box2'>
        <br>
        <input type='text' name="details" id="tb3" value='box3'>
        <br>
    </form>
</body>
</html

>

test.js Jquery代码，允许根据激活变量启用或禁用检查

toggleInputs($('#checker'));
$('#checker').click(function () {
    toggleInputs($(this));
});
function toggleInputs(element) {
    if (element.prop('checked')) {
        $('#tb1').prop('disabled', false);
        $('#tb2').prop('disabled', false);
        $('#tb3').prop('disabled', false);
    } else {
        $('#tb1').prop('disabled', true);
        $('#tb2').prop('disabled', true);
        $('#tb3').prop('disabled', true);
    }
}

虽然你已经接受了答案，但我觉得这个答案有点过于复杂，并且留下了不必要的冗余。也就是说，我建议采用以下方法：

function toggleInputs(element) {
    /* using a multiple selector
       checking whether the check-box is checked or not using ':is()`,
       which returns a Boolean */
    $('#tb1, #tb2, #tb3').prop('disabled', element.is(':checked'));
}
$('#checker').change(function(){
    // event-handling (reacting to the change event)
    toggleInputs($(this));
    /* the next change() (without arguments) triggers the change event,
       and, therefore, the event-handling */
}).change();

JS小提琴演示。

修改了上述函数(使用 ! 运算符(，使字段在checked input时可编辑，并在未选中input时disabled：

function toggleInputs(element) {
    $('#tb1, #tb2, #tb3').prop('disabled', !element.is(':checked'));
}
$('#checker').change(function(){
    toggleInputs($(this));
}).change();

JS小提琴演示。

引用：

  • :checked选择器。
  • change() .
  • is() .
  • prop() .

你去...实际上使用jquery作为您的问题：

.HTML 

<form>
    <input type="checkbox" name="detailsgiven" id="checker" checked=checked>Enabled?
    <br>
    <input type='text' name="details" id="tb1" value='box1'>
    <br>
    <input type='text' name="details" id="tb2" value='box2'>
    <br>
    <input type='text' name="details" id="tb3" value='box3'>
    <br>
</form>

JavaScript

$(document).ready(function() {
   toggleInputs($('#checker'));
   $('#checker').click(function () {
       toggleInputs($(this));
    });
});
function toggleInputs(element) {
    if (element.prop('checked')) {
        $('#tb1').prop('disabled', false);
        $('#tb2').prop('disabled', false);
        $('#tb3').prop('disabled', false);
    } else {
        $('#tb1').prop('disabled', true);
        $('#tb2').prop('disabled', true);
        $('#tb3').prop('disabled', true);
    }
}

http://jsfiddle.net/Q9Lg4/40/

进行初始调用时，尚未加载主体中的元素。您可以将对 toggleInputs 的第一次调用包装在 JQuery 就绪事件函数中，或者将包含 test.js 的脚本标记放在表单之后。

相关文章：