Флажок Jquery проверен при загрузке страницы

Question

Скрипт работает нормально, но мне интересно, есть ли способ избежать повторения кода (метод DRY).

Demo

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); 
    } 
}); 

Answer 1

Если вы не можете установить атрибуты по умолчанию в 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'); 

Демо: http://jsfiddle.net/tusharj/t01a9cxL/1/

Answer 2

Раздельный логик в одну функцию:

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); 

Answer 3

Простых сделать его как простой 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

Answer 4

Если каждый раз, когда страница загружена вы хотите, чтобы флажок, чтобы проверить и текстовое поле, чтобы отключить это лучше сделать это в HTML

HTML

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

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); 
    } 
}); 

Answer 5

Вы можете получить тот же результат с меньшим количеством кода следующим образом:

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); 
});