页面加载时选中 Jquery 复选框

Jquery checkbox checked when page loads

提问by brunodd

The script is working fine however I am wondering if there is a way to avoid the repetition in the code (DRY method).

该脚本工作正常，但我想知道是否有办法避免代码中的重复（DRY 方法）。

Demo

演示

JS code:

JS代码：

// Checkbox checked and input disbaled when page loads

$('#checkbox').prop('checked', true);

if ($('#checkbox').is(':checked') == true) {
    $('#textInput').prop('disabled', true);
}


// Enable-Disable text input when checkbox is checked or unchecked

$('#checkbox').change(function() {
    if ($('#checkbox').is(':checked') == true) {
        $('#textInput').prop('disabled', true);
    } else {
        $('#textInput').val('').prop('disabled', false);
    }
});

回答by Tushar

If you can't set the attributes by default in HTML:

如果您不能在默认情况下设置属性HTML：

// Checkbox checked and input disbaled when page loads
$('#checkbox').prop('checked', true);

// Enable-Disable text input when checkbox is checked or unchecked
$('#checkbox').on('change', function() {
    var value = this.checked ? $('#textInput').val() : '';
    $('#textInput').prop('disabled', this.checked).val(value);
}).trigger('change');

Demo: http://jsfiddle.net/tusharj/t01a9cxL/1/

演示：http: //jsfiddle.net/tusharj/t01a9cxL/1/

回答by George

If every time the page is loaded you want the check box to be checked and the text box to be disabled it's better to do it in HTML

如果每次加载页面时都希望选中复选框并禁用文本框，最好在 HTML 中进行

HTML

HTML

<input type="checkbox" id="checkbox" checked="true" />
<input type="text" id="textInput" disabled=""/>

JavaScript

JavaScript

// Enable-Disable text input when checkbox is checked or unchecked

$('#checkbox').change(function() {
    if ($('#checkbox').is(':checked') == true) {
        $('#textInput').prop('disabled', true);
    } else {
        $('#textInput').val('').prop('disabled', false);
    }
});

回答by Alex

Separate your logic into a reusable function:

将您的逻辑分离成一个可重用的函数：

function checkboxStatus() {
    if ($('#checkbox').is(':checked') == true) {
        $('#textInput').prop('disabled', true);
    } else {
        $('#textInput').val('').prop('disabled', false);
    }
}

// Checkbox checked and input disbaled when page loads
$('#checkbox').prop('checked', true);
checkboxStatus();

// Enable-Disable text input when checkbox is checked or unchecked
$('#checkbox').change(checkboxStatus);

回答by Sudharsan S

Simple make it as easy jquery in have many ways to done

简单使它像 jquery 一样简单，有很多方法可以完成

$('#checkbox').prop( 'checked', true ); // when intially checked
$('#checkbox').change(function(){
     $('#textInput').prop('disabled', $(this).is(':checked'));
     if(!$(this).is(':checked')){
       $('#textInput').val('')
     }
}).change(); //intially trigger the event change

Fiddle

小提琴

回答by Brino

You can get the same result with less code as follows:

您可以使用较少的代码获得相同的结果，如下所示：

Updated Fiddle

更新的小提琴

// Checkbox checked and input disbaled when page loads
$('#checkbox').prop('checked', true);
$('#textInput').prop('disabled', true);

// Enable-Disable text input when checkbox is checked or unchecked
$('#checkbox').change(function () {
    var checked = $(this).is(':checked') == true;
    $('#textInput').prop('disabled', checked);
});