CODEWITHSUNDEEP
jquerycheckboxpageload
brunodd
brunodd

Reputation: 2584

Jquery checkbox checked when page loads

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

Demo

JS code:

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

Upvotes: 6

Views: 47495

Answers (5)

Tushar
Tushar

Reputation: 87203

If you can't set the attributes by default in 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/

Upvotes: 14

Sudharsan S
Sudharsan S

Reputation: 15393

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

$('#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

Upvotes: 1

Alex
Alex

Reputation: 8663

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

Upvotes: 1

George
George

Reputation: 6739

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

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

Upvotes: 3

Brino
Brino

Reputation: 2502

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

Upvotes: 1

Related Questions