Debug School

rakesh kumar
rakesh kumar

Posted on

Explain the use of prop in jquery

In jQuery, the .prop() method is used to get or set properties of elements. Properties are generally boolean attributes or values that affect the behavior of an element. Here's an explanation of its use with examples:

Getting a Property
Setting a Property
Toggling a Property
Checking if an Element has a Property(Check if an input element is disabled)
Removing a Property(Remove the readonly property from an input element)
Working with Radio Buttons(Get the value of the selected/particular radio button)
Handling Form Elements(Disable all input elements in a form)
Dealing with Checkboxes in a List
Handling Select (Dropdown) Elements(Get the selected option's text of a dropdown)
Manipulating the TabIndex
Managing Input Types:(Change the type attribute of an input)
Set the disabled property of a button:
Get the src attribute of an image
Set the src attribute of an image:
Get the class attribute of an element
Set or remove the class attribute of an element:
Set the style attribute of an element
Get the type attribute of an input element:
Set the value of an input field:
Get the selected option of a dropdown (select) element:
Get and set the text content of an element paragraph:

Getting a Property:

// Example: Get the checked property of a checkbox
var isChecked = $('#myCheckbox').prop('checked');
console.log(isChecked); // true or false
Enter fullscreen mode Exit fullscreen mode

In this example, isChecked will be true if the checkbox with the id myCheckbox is checked, and false otherwise.

$(document).ready(function() {
    $('#myCheckbox').change(function() {
        if ($(this).prop('checked')) {
            // Checkbox is checked/enabled, so make an AJAX request
            $.ajax({
                url: '/some/url',
                method: 'POST',
                data: { someData: 'someValue' },
                success: function(response) {
                    // Do something with the AJAX response
                }
            });
        } else {
            // Checkbox is unchecked/disabled, so do nothing
        }
    });
});
Enter fullscreen mode Exit fullscreen mode 
$(document).ready(function() {
    if ($('#myCheckbox').prop('checked')) {
        // Checkbox is already checked/enabled, so make an AJAX request
        $.ajax({
            url: '/some/url',
            method: 'POST',
            data: { someData: 'someValue' },
            success: function(response) {
                // Do something with the AJAX response
            }
        });
    } else {
        // Checkbox is already unchecked/disabled, so do nothing
    }
});
Enter fullscreen mode Exit fullscreen mode

Setting a Property:

// Example: Set the disabled property of a button
$('#myButton').prop('disabled', true);
Enter fullscreen mode Exit fullscreen mode 
 var datasItemId = $('#dataitem_id').val();

        console.log('mera dataitemid', datasItemId);

$('#callmyAjaxButton[data-id="' + datasItemId + '"]').text('Added');
$('#callmyAjaxButton[data-id="' + datasItemId + '"]').prop('disabled', true).addClass('disabled');
Enter fullscreen mode Exit fullscreen mode

Image description

In this example, the button with the id myButton will be disabled. You can set the property to false to enable the button.

Toggling a Property:

// Example: Toggle the checked property of a checkbox
$('#myCheckbox').prop('checked', !$('#myCheckbox').prop('checked'));
Enter fullscreen mode Exit fullscreen mode

html part

 <div class="row">
                            <div >
                            <div>
                                <input type="checkbox" id="selectAll" class="mr-2" onchange="selectAllSocial()">
                                <label for="selectAll"><b>Select All</b></label>
                            </div>
                                <div  id="facebooksocialContainer">
                                <input type="checkbox" class="socialCheckbox" id="face_priceCheckbox">           
                                    <span><b>Facebook: </b></span>
                                    <span id="facebooksocial"></span>
                                </div>
                                <div  id="twittersocialContainer">
                                <input type="checkbox" class="socialCheckbox" id="twitter_priceCheckbox">        
                                    <span><b>Twitter: </b></span>
                                    <span id="twittersocial"></span>
                                </div>
                                <div  id="youtubesocialContainer">
                                <input type="checkbox" class="socialCheckbox" id="youtube_priceCheckbox"> 
                                    <span><b>Youtube: </b></span>
                                    <span id="youtubesocial"></span>
                                </div>
                                <div  id="wordpresssocialContainer">
                                <input type="checkbox" class="socialCheckbox" id="wordpress_priceCheckbox"> 
                                    <span><b>Wordpress: </b></span>
                                    <span id="wordpresssocial"></span>
                                </div>
                                <div  id="tumblersocialContainer">
                                <input type="checkbox" class="socialCheckbox" id="tumblr_priceCheckbox"> 
                                    <span><b>Tumbler: </b></span>
                                    <span id="tumblersocial"></span>
                                </div>
                                <div id="instagramsocialContainer">
                                <input type="checkbox" class="socialCheckbox" id="instagram_priceCheckbox"> 
                                    <span><b>Instagram: </b></span>
                                    <span id="instagramsocial"></span>
                                </div>
                                <div id="quorasocialContainer">
                                <input type="checkbox" class="socialCheckbox" id="quora_priceCheckbox"> 
                                    <span><b>Quora: </b></span>
                                    <span id="quorasocial"></span>
                                </div>
                                <div id="pintrestsocialContainer">
                                <input type="checkbox" class="socialCheckbox" id="pintrest_priceCheckbox"> 
                                    <span><b>Pintrest: </b></span>
                                    <span id="pintrestsocial"></span>
                                </div>
                                <div id="redditsocialContainer">
                                <input type="checkbox" class="socialCheckbox" id="reddit_priceCheckbox"> 
                                    <span><b>Reddit: </b></span>
                                    <span id="redditsocial"></span>
                                </div>
                                <div  id="koosocialContainer">
                                <input type="checkbox" class="socialCheckbox" id="koo_priceCheckbox"> 
                                    <span><b>Koo: </b></span>
                                    <span id="koosocial"></span>
                                </div>
                                <div id="scoopitsocialContainer">
                                <input type="checkbox" class="socialCheckbox" id="scoopit_priceCheckbox"> 
                                    <span><b>Scoopit: </b></span>
                                    <span id="scoopitsocial"></span>
                                </div>
                                <div  id="slashdotsocialContainer">
                                <input type="checkbox" class="socialCheckbox" id="slashdot_priceCheckbox"> 
                                    <span><b>Slashdot: </b></span>
                                    <span id="slashdotsocial"></span>
                                </div>
                                <div  id="telegramsocialContainer">
                                <input type="checkbox" class="socialCheckbox" id="telegram_priceCheckbox"> 
                                    <span><b>Telegram: </b></span>
                                    <span id="telegramsocial"></span>
                                </div>
                                <div id="linkedsocialContainer">
                                <input type="checkbox" class="socialCheckbox" id="linkedin_priceCheckbox"> 
                                    <span><b>Linked In: </b></span>
                                    <span id="linkedsocial"></span>
                                </div>
                             <input type="hidden" value="{{ Auth::user()->id }}" name="admin_id" id="admin_id" />                   
                            <input type="hidden"  name="slug" id="slug" />
                            <input type="hidden" name="influencer_email"   id="influencer_email" />
                            <input type="hidden" value="{{ Auth::user()->email }}" name="admin_email" id="admin_email">
                            <input type="hidden" value="{{ Auth::user()->name }}" name="user_name">
                            <input type="hidden"  name="item"  id="item">
                            <input type="hidden" name="dataitem_id"  id="dataitem_id">
                            <button type="submit" name="action_button" id="action_button" class="btn btn-sm py-1 btn-primary me-2" value="Add">Add Cart</button>
                            </div>                            
                        </div>
Enter fullscreen mode Exit fullscreen mode

Jquery part

 var selectedContainers = [];
    $('#selectAll').change(function () {
            const socialCheckboxes = $('.socialCheckbox:visible');
        const selectAllCheckbox = $('#selectAll');

        socialCheckboxes.prop('checked', selectAllCheckbox.prop('checked'));
        logSelectedSocialContainers();

    });
Enter fullscreen mode Exit fullscreen mode

Explanation

Image description

Image description

This example toggles the checked state of a checkbox. If the checkbox is checked, it will be unchecked, and vice versa.

Checking if an Element has a Property:

// Example: Check if an input element is disabled
var isDisabled = $('#myInput').prop('disabled');
console.log(isDisabled); // true or false
Enter fullscreen mode Exit fullscreen mode

In this example, isDisabled will be true if the input element with the id myInput is disabled, and false otherwise.

Removing a Property:

// Example: Remove the readonly property from an input element
$('#myInput').prop('readonly', false);
Enter fullscreen mode Exit fullscreen mode

This example removes the readonly property from an input element. You set the property to true to make the input readonly and false to make it editable.

Use Case: Handling Dynamic Changes
Consider a scenario where you want to dynamically set the href attribute of a link based on some condition:

// Example: Dynamically set the href attribute of a link
var newLink = 'https://example.com';

if (someCondition) {
    newLink = 'https://alternate.com';
}

$('#myLink').prop('href', newLink);
Enter fullscreen mode Exit fullscreen mode

In this example, the href attribute of the link with the id myLink is dynamically set based on a condition. This kind of dynamic property manipulation is a common use case for the .prop() method in jQuery.

Remember that while .prop() is often used for boolean properties, if you are dealing with attributes that hold textual information (like value, src, href, etc.), you might also use .attr(). The distinction between .prop() and .attr() is important and depends on the nature of the property or attribute you are dealing with.

Working with Radio Buttons:

// Example: Get the value of the selected radio button
var selectedValue = $('input[name="myRadioGroup"]:checked').val();
Enter fullscreen mode Exit fullscreen mode

In this example, it retrieves the value of the selected radio button in a radio button group named "myRadioGroup."

Handling Form Elements:

// Example: Disable all input elements in a form
$('#myForm :input').prop('disabled', true);
Enter fullscreen mode Exit fullscreen mode

This disables all input elements within a form with the id myForm.

Dealing with Checkboxes in a List:

// Example: Toggle the checked state of all checkboxes in a list
$('#checkboxList :checkbox').prop('checked', function(index, value) {
    return !value;
});
Enter fullscreen mode Exit fullscreen mode

This toggles the checked state of all checkboxes within an element with the id checkboxList.

Handling Select (Dropdown) Elements:

// Example: Get the selected option's text of a dropdown
var selectedText = $('#myDropdown option:selected').text();
Enter fullscreen mode Exit fullscreen mode

This retrieves the text of the selected option in a dropdown with the id myDropdown.

 <div class="col-lg-4 col-md-3 col-sm-3 col-3">
                    <label class="font-weight-bold text-danger"> State </label>
                    <select class="form-control states" name="filter_by_state" id="filter_by_state">
                        <option value="all">Select State</option>
                    </select>
                </div>
                <div class="col-lg-4 col-md-3 col-sm-3 col-3">
                    <label class="font-weight-bold text-danger"> City </label>
                    <select class="form-control cities" name="filter_by_city" id="filter_by_city">
                        <option value="all">Select City</option>
                    </select>
                </div>
Enter fullscreen mode Exit fullscreen mode 
 $('#filter_by_state option').prop('selected', function() {
                return this.defaultSelected;
            });
            $('#filter_by_city option').prop('selected', function() {
                return this.defaultSelected;
            });
Enter fullscreen mode Exit fullscreen mode

Image description

Toggle a Class Based on a Property:

// Example: Toggle a 'highlight' class based on the checked state
$('#myCheckbox').change(function() {
    var isChecked = $(this).prop('checked');
    $(this).toggleClass('highlight', isChecked);
});
Enter fullscreen mode Exit fullscreen mode

This example adds or removes a 'highlight' class based on the checked state of a checkbox.

Handling Image Load Events:

// Example: Check if an image has loaded
$('#myImage').on('load', function() {
    var hasLoaded = $(this).prop('complete');
    console.log('Image has loaded:', hasLoaded);
});
Enter fullscreen mode Exit fullscreen mode

This checks if an image with the id myImage has completely loaded.

Managing Input Types:

// Example: Change the type attribute of an input
$('#myInput').prop('type', 'password');
Enter fullscreen mode Exit fullscreen mode

This changes the type attribute of an input with the id myInput to 'password', making it a password input.

Manipulating the TabIndex:

// Example: Set the tabindex attribute dynamically
$('#myInput').prop('tabindex', 3);
Enter fullscreen mode Exit fullscreen mode

This sets the tabindex attribute of an input with the id myInput to 3.

Get the value of the href attribute of a link:

// Get the value of the href attribute of a link
var linkHref = $('#myLink').prop('href');
Enter fullscreen mode Exit fullscreen mode

Set the disabled property of a button:

// Disable a button
$('#myButton').prop('disabled', true);

// Enable a button
$('#myButton').prop('disabled', false);
Enter fullscreen mode Exit fullscreen mode

Get the src attribute of an image:

// Get the value of the src attribute of an image
var imageUrl = $('#myImage').prop('src');
Enter fullscreen mode Exit fullscreen mode

Set the src attribute of an image:

// Set the src attribute of an image
$('#myImage').prop('src', 'new-image.jpg');
Enter fullscreen mode Exit fullscreen mode

Get the class attribute of an element:

// Get the value of the class attribute of an element
var elementClass = $('#myElement').prop('class');
Enter fullscreen mode Exit fullscreen mode

Set the class attribute of an element:

// Add a class to an element
$('#myElement').addClass('newClass');

// Remove a class from an element
$('#myElement').removeClass('oldClass');
Enter fullscreen mode Exit fullscreen mode

Check if an input element is disabled:

// Check if an input element is disabled
var isDisabled = $('#myInput').prop('disabled');
Enter fullscreen mode Exit fullscreen mode

Set the style attribute of an element:

// Set the style attribute of an element
$('#myElement').prop('style', 'color: red; font-size: 16px;');
Enter fullscreen mode Exit fullscreen mode

Get the type attribute of an input element:

// Get the value of the type attribute of an input element
var inputType = $('#myInput').prop('type');
Enter fullscreen mode Exit fullscreen mode

Set the data attribute of an element:

// Set a data attribute of an element
$('#myElement').data('customAttribute', 'customValue');
Enter fullscreen mode Exit fullscreen mode

Get the value of an input field:

// Get the value property of an input field
var inputValue = $('#myInput').prop('value');
Enter fullscreen mode Exit fullscreen mode

Set the value of an input field:

// Set the value property of an input field
$('#myInput').prop('value', 'New Value');
Enter fullscreen mode Exit fullscreen mode

Disable/Enable an input element:

// Disable an input element
$('#myInput').prop('disabled', true);

// Enable an input element
$('#myInput').prop('disabled', false);
Enter fullscreen mode Exit fullscreen mode

Get the selected option of a dropdown (select) element:

// Get the value of the selected option in a dropdown
var selectedValue = $('#myDropdown').find('option:selected').prop('value');
Enter fullscreen mode Exit fullscreen mode

Set the selected option of a dropdown (select) element:

// Set the selected option in a dropdown based on its value
$('#myDropdown').val('optionValue').prop('selected', true);
Enter fullscreen mode Exit fullscreen mode

Get the text content of an element:

// Get the text content of a paragraph element
var textContent = $('#myParagraph').prop('textContent');
Set the text content of an element:
Enter fullscreen mode Exit fullscreen mode 

// Set the text content of a paragraph element
$('#myParagraph').prop('textContent', 'New Text Content');
Enter fullscreen mode Exit fullscreen mode

Top comments (0)