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
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
}
});
});
$(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
}
});
Setting a Property:
// Example: Set the disabled property of a button
$('#myButton').prop('disabled', true);
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');
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'));
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>
Jquery part
var selectedContainers = [];
$('#selectAll').change(function () {
const socialCheckboxes = $('.socialCheckbox:visible');
const selectAllCheckbox = $('#selectAll');
socialCheckboxes.prop('checked', selectAllCheckbox.prop('checked'));
logSelectedSocialContainers();
});
Explanation
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
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);
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);
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();
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);
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;
});
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();
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>
$('#filter_by_state option').prop('selected', function() {
return this.defaultSelected;
});
$('#filter_by_city option').prop('selected', function() {
return this.defaultSelected;
});
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);
});
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);
});
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');
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);
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');
Set the disabled property of a button:
// Disable a button
$('#myButton').prop('disabled', true);
// Enable a button
$('#myButton').prop('disabled', false);
Get the src attribute of an image:
// Get the value of the src attribute of an image
var imageUrl = $('#myImage').prop('src');
Set the src attribute of an image:
// Set the src attribute of an image
$('#myImage').prop('src', 'new-image.jpg');
Get the class attribute of an element:
// Get the value of the class attribute of an element
var elementClass = $('#myElement').prop('class');
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');
Check if an input element is disabled:
// Check if an input element is disabled
var isDisabled = $('#myInput').prop('disabled');
Set the style attribute of an element:
// Set the style attribute of an element
$('#myElement').prop('style', 'color: red; font-size: 16px;');
Get the type attribute of an input element:
// Get the value of the type attribute of an input element
var inputType = $('#myInput').prop('type');
Set the data attribute of an element:
// Set a data attribute of an element
$('#myElement').data('customAttribute', 'customValue');
Get the value of an input field:
// Get the value property of an input field
var inputValue = $('#myInput').prop('value');
Set the value of an input field:
// Set the value property of an input field
$('#myInput').prop('value', 'New Value');
Disable/Enable an input element:
// Disable an input element
$('#myInput').prop('disabled', true);
// Enable an input element
$('#myInput').prop('disabled', false);
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');
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);
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:
// Set the text content of a paragraph element
$('#myParagraph').prop('textContent', 'New Text Content');
Top comments (0)